CODEWITHSUNDEEP
javascripthtmlcss
Chiong Wilson
Chiong Wilson

Reputation: 87

Animation using Javascript or link CSS to Javascript

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>

Upvotes: 0

Views: 97

Answers (1)

LALIT KANTA DIBYADARSHAN
LALIT KANTA DIBYADARSHAN

Reputation: 753

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 !!

Upvotes: 1

Related Questions