使用 Javascript 的动画或将 CSS 链接到 Javascript

Question

could any kind soul help me in my program as I am new to HTML, Javascript, and CSS?因为我是 HTML、Javascript 和 CSS 的新手，所以任何好心的人都可以在我的程序中帮助我吗？ In my CSS, I have 4 different animations going to different locations.在我的 CSS 中，我有 4 个不同的动画去不同的位置。 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.例如，如果我想做一个案例结构，例如，为机器人 A 按 A，为机器人 B 按 B，以此类推。

Below will be the program for my CSS part.下面将是我的 CSS 部分的程序。 Hopefully, someone will be able to help me.希望有人能够帮助我。 Or is there anyway, I'm able to link my CSS to javascript?或者无论如何，我可以将我的 CSS 链接到 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>

Answer 1

I guess currently your animations run automatically.我猜目前你的动画会自动运行。 To make them work on some event use transition .要使它们在某些事件上工作，请使用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.按 A 将机器人向左 -> 向右移动。

Press B to move the robot top -> bottom按 B 移动机器人顶部 -> 底部

Have a great day !!祝你有美好的一天！！

使用 Javascript 的动画或将 CSS 链接到 Javascript

问题描述

1 个解决方案

解决方案1
1 已采纳 2019-12-06 06:48:26

使用 Javascript 的动画或将 CSS 链接到 Javascript

问题描述

1 个解决方案

解决方案1 1 已采纳 2019-12-06 06:48:26

解决方案1
1 已采纳 2019-12-06 06:48:26