CODEWITHSUNDEEP
javascripthtmlcss
Manal jain
Manal jain

Reputation: 31

How to stop CSS rotation animation

I want to remove the css animation from the wheel whee2 car and track and make all of them to stop. Currently my track is translation in x direction and wheels are rotating in their own axis.

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.

HTML Code

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

*{
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

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

Upvotes: 0

Views: 439

Answers (2)

Manal jain
Manal jain

Reputation: 31

sir I has done this but when i am doing console.log(tr) it is printing 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';
})

Upvotes: 0

AhmadKZX
AhmadKZX

Reputation: 303

if you want to pause wheel animation when clicking, this might be helpful:

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

Upvotes: 1

Related Questions