Animation using Javascript or link CSS to Javascript

Question

could any kind soul help me in my program as I am new to HTML, Javascript, and CSS? In my CSS, I have 4 different animations going to different locations. So for example if, I want to do a case structure, for example, press A for robot A, press B for robot B, so on so fore.

Below will be the program for my CSS part. Hopefully, someone will be able to help me. Or is there anyway, I'm able to link my CSS to javascript?

<style>

#robot {
  position: fixed;
  top: 280px;
  left: 600px;
  border-radius: 50%;
  width: 50px;
  height: 60px;
  -webkit-animation-name: example; /* Safari 4.0 - 8.0 */
  -webkit-animation-duration: 4s; /* Safari 4.0 - 8.0 */
  animation-name:robot;
  animation-duration: 5s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
  }

  #robot2 {
    position: fixed;
    top: 180px;
    left: 500px;
    border-radius: 50%;
    width: 50px;
    height: 60px;
    -webkit-animation-name: example; /* Safari 4.0 - 8.0 */
    -webkit-animation-duration: 4s; /* Safari 4.0 - 8.0 */
    animation-name:robot2;
    animation-duration: 5s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
    }
    #robot3 {
      position: fixed;
      top: 180px;
      left: 400px;
      border-radius: 50%;
      width: 50px;
      height: 60px;
      -webkit-animation-name: example; /* Safari 4.0 - 8.0 */
      -webkit-animation-duration: 4s; /* Safari 4.0 - 8.0 */
      animation-name:robot3;
      animation-duration: 5s;
      animation-iteration-count: 1;
      animation-fill-mode: forwards;
      }
      #robot4 {
        position: fixed;
        top: 180px;
        left: 300px;
        border-radius: 50%;
        width: 50px;
        height: 60px;
        -webkit-animation-name: example; /* Safari 4.0 - 8.0 */
        -webkit-animation-duration: 4s; /* Safari 4.0 - 8.0 */
        animation-name:robot4;
        animation-duration: 5s;
        animation-iteration-count: 1;
        animation-fill-mode: forwards;
        }

body {
  height: 100%;
  width: 100%;
  background-image: url('TPHRG floorplan1.png');
  background-repeat: no-repeat;
  background-attachment: fixed;
  /* background-position: center; */
  background-size: 980px 400px, cover;
}


/* Safari 4.0 - 8.0 */

 @-webkit-keyframes robot {
 0%  {top: 280px;left:600px;}
 50% {top: 180px;left:600px;}
 100% {top: 180px;left:500px;}
}

@-webkit-keyframes robot2 {
from {top: 180px;left:500px;}
to {top: 180px;left:400px;}

}
@-webkit-keyframes robot3 {
from {top: 180px;left:400px;}
to {top: 180px;left:300px;}

}
@-webkit-keyframes robot4 {
from {top: 180px;left:300px;}
to {top: 180px;left:200px;}

}


</style>

LALIT KANTA DIBYADARSHAN · Accepted Answer · 2019-12-06 07:35:40Z

1

I guess currently your animations run automatically. To make them work on some event use transition.

Here is the working code.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
      .robot_start_left {
        height: 20px;
        width: 20px;
        background-color: red;
        position: relative;
        left: 0px;
        transition: left 1s;
      }

      .robot_start_top {
        top: 0px;
        transition: top 1s;
      }

      .robot_end_top {
        top: 100px;
      }

      .robot_end_left {
        left: 100px;
      }
    </style>
</head>
<body onkeydown = 'move(event)'>
 <div class="robot_start_left robot_start_top" id="app"></div>  
  <script>
    var move = function (event) {
      if(event.keyCode === 65) {
        const appDiv = document.getElementById('app');
        appDiv.classList.add("robot_end_left")
      }

      if(event.keyCode === 66) {
        const appDiv = document.getElementById('app');
        appDiv.classList.add("robot_end_top")
      }
    }
  </script>
</body>
</html>

UPDATED

Press A to move the robot left -> right.

Press B to move the robot top -> bottom

Have a great day !!

edited Dec 6, 2019 at 7:35

answered Dec 6, 2019 at 6:48

LALIT KANTA DIBYADARSHAN

7534 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Chiong Wilson Over a year ago

Thank for your reply, but if I want to do something like moving down and to the right, what should I need to do ?

LALIT KANTA DIBYADARSHAN Over a year ago

Add transition for Top and bottom property, and add separate classes for them

Chiong Wilson Over a year ago

Thank for the reply once again. Another question is, how do I add my own photo inside? Not to the background but just a normal image.

LALIT KANTA DIBYADARSHAN Over a year ago

use <img>. and add the same classes

Chiong Wilson Over a year ago

Thank you for the update, Why is it when I press on A it straight jumps to the right and when I pressed on B it will move down normally.

|

Collectives™ on Stack Overflow

Animation using Javascript or link CSS to Javascript

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related