CSS Animations

programming web dev
1

I had seen the video of basic CSS animation where you make a circle to move along a line.
But you used for prefix free.
I dont have knowledge of JavaScript, so I tried it by using prefix (-webkit-) for Google Chrome.
Apparently, it didnt seem to work. Here are the codes…

#circle { width:200px; height:200px; background:blue; border-radius:100px; } body { background-color:orange; padding:50px; } @-webkit-keyframes slide { 0% { transform: tranlate3d(0px,0px,0px); } 25% { transform: tranlate3d(400px,0px,0px); } 50% { transform: tranlate3d(800px,0px,0px); } 75% { transform: translate3d(400px,0px,0px); } 100%{ transform: tranlate3d(0px,0px,0px); } }

@keyframes slide {
0% {
transform: tranlate3d(0px,0px,0px);
}
25% {
transform: tranlate3d(400px,0px,0px);
}
50% {
transform: tranlate3d(800px,0px,0px);
}
75% {
transform: translate3d(400px,0px,0px);
}
100%{
transform: tranlate3d(0px,0px,0px);
}
}

#mycircle {
-webkit-animation name: slide
-webkit-animation-duration:2s
-webkit-animation-iteration-count:10;
animation name: slide
animation-duration:2s
animation-iteration-count:10;
}

Can you figure out what’s wrong with these…

2

Hi, Shubham!
Happy to take a look at this. Can you paste your code again? Nothing shows up in your post :smile:

Cheers,
Kirupa