如何停止 CSS 旋转 animation

Question

I want to remove the css animation from the wheel whee2 car and track and make all of them to stop.我想从车轮 whee2 车和轨道上卸下 css animation 并使它们全部停止。 Currently my track is translation in x direction and wheels are rotating in their own axis.目前我的轨道在 x 方向平移，车轮在自己的轴上旋转。

In simple words I want to remove the keyframes while I click somewhere, for this I can make a button with onclick property but it is not helping me enough.简而言之，我想在单击某处时删除关键帧，为此我可以制作一个具有 onclick 属性的按钮，但这对我的帮助还不够。

HTML Code HTML 代码

 <!DOCTYPE html>
  <html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Car Animation and Javascript</title>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
  </head>
 <body>
 <div class="container">
    <div class="sky">
        <div class="trees">

        </div>
        <div class="track">

        </div>
        <div class="car">
            <div class="wheel wheel1">
                <img src="car_wheel_left.png" alt="">
            </div>
            <div class="wheel wheel2">
                <img src="car_wheel_right.png" alt="">
            </div>
        </div>
        
      </div>
   </div>
</body>
</html>

CSS code CSS代码

*{
margin: 0;
padding: 0;
}

.sky{
height: 100%;
width: 100%;
background-image: url(background.jpg);
background-repeat: no-repeat;
position: absolute;
}
body{
overflow: hidden;
animation:shakeBody  linear 6s infinite;
}
.trees{
height: 100vh;
width: 100%;
background-size: cover;
background-image: url(trees.png);
background-repeat: no-repeat;
position: absolute;
top: -174px;
}
.track{
height: 30vh;
width: 800vw;
background-image: url(track.png);
background-repeat: repeat-x;
position: absolute;
top: 70vh;
animation: carMove linear 6s infinite;
}
.car{
height: 100px;
width: 319px;
background-image: url(car_body.png);
background-size: cover;
background-repeat: no-repeat;
position: absolute;
top: 66vh;
left: 75vh;
animation:shake  linear 6s infinite;
}
.wheel1 img{
width: 77px;
position: relative;
top: 39px;
left: 39px;
animation: wheelRotation linear .6s infinite;
}
.wheel2 img{
width: 77px;
position: relative;
top: -42px;
left: 215px;
animation: wheelRotation linear .6s infinite;
}
@keyframes wheelRotation{
100%{
    transform: rotate(360deg);
}
}
@keyframes carMove{
100%{
    transform: translateX(-500vw);
}
}

@keyframes shake{
0%{
    transform: translateY(-5px);
}
50%{
    transform: translateY(5px);
}
100%{
    transform: translateY(-5px);
}
}
@keyframes shakeBody{
0%{
    transform: translateY(-2px);
}
50%{
    transform: translateY(2px);
}
100%{
    transform: translateY(-2px);
}
}

JavaScript Code JavaScript 代码

var audio=document.createElement('audio')
audio.setAttribute('src','sound.mp3')
audio.loop=true;
audio.play();

Answer 1

if you want to pause wheel animation when clicking, this might be helpful:如果您想在单击时暂停滚轮 animation，这可能会有所帮助：

let wheels = document.getElementsByClassName('wheel');
document.addEventListener('click', () => {
  wheels[0].style.animationPlayState = 'paused';
  wheels[1].style.animationPlayState = 'paused';
})

Answer 2

sir I has done this but when i am doing console.log(tr) it is printing null先生，我已经这样做了，但是当我在执行 console.log(tr) 时，它正在打印 null

let wheels = document.getElementsByTagName('img');
let tr =     document.getElementsByClassName('track');
let cr= document.getElementsByClassName(".car")
document.addEventListener('click', () => {
console.log(tr);
console.log(cr);
wheels[0].style.animationPlayState='paused';
wheels[1].style.animationPlayState='paused';
})

如何停止 CSS 旋转 animation

问题描述

2 个解决方案

解决方案1
1 已采纳 2021-04-14 17:29:19

解决方案2
0 2021-04-15 18:55:26

如何停止 CSS 旋转 animation

问题描述

2 个解决方案

解决方案1 1 已采纳 2021-04-14 17:29:19

解决方案2 0 2021-04-15 18:55:26

解决方案1
1 已采纳 2021-04-14 17:29:19

解决方案2
0 2021-04-15 18:55:26