# CSS Animations

**URL:** <https://forum.kirupa.com/t/css-animations/633872>\
**Category:** web dev\
**Created:** [October 18, 2015, 10:46am UTC](https://forum.kirupa.com/t/css-animations/633872 "2015-10-18T10:46:03Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![Shubham\_Bengani](https://avatars.discourse-cdn.com/v4/letter/s/7cd45c/32.png) [@Shubham\_Bengani](https://forum.kirupa.com/u/Shubham_Bengani)\
**Post date:** [October 18, 2015, 10:46am UTC](https://forum.kirupa.com/t/css-animations/633872/1 "2015-10-18T10:46:03Z")

</div>

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…

---

<div class="post-metadata">

**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\
**Post date:** [October 19, 2015, 7:53am UTC](https://forum.kirupa.com/t/css-animations/633872/2 "2015-10-19T07:53:52Z")

</div>

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

Cheers,  
Kirupa