Printable Version of Topic

Click here to view this topic in its original format

HTMLHelp Forums _ Cascading Style Sheets _ How to use animation feature in CSS3?

Posted by: bintje Apr 25 2015, 02:55 AM

Hi everyone, I'm newbie in CSS3 and really facinated by its animation features.

I would like to achieve the animation effect in this page:http://www.skyhallfence.com/, can anyone tell me know to do that?

Really thank you guys.

Posted by: Christian J Apr 25 2015, 08:26 AM

Which part of it are you having trouble with?

FWIW that page's animations seem to depend on javascript as well.

Posted by: ramarjun May 27 2015, 09:44 AM

hi,

its not only make animation with css we need customize our page with javascript for making animation effect

Posted by: icanswim70 Aug 15 2019, 08:49 AM

Hey guys, I'm glad I found this topic. I'm having a similar issue with creating a css animation. I setup the perameters by the book but the damn thing doesn't want to work.

Note I made a wrapper div to contain the animiation div with a width of 100%.

Inside that div I stuck the image i want to slide back and forth with the class"anime"

In css I coded:

@keyframes mouse {
from {
margin-left: 100%;
width:100%;
}

to{
margin-left:0%;
width:100%;
}
}
.anime {
height:35px;
width: 45px;
animation-duration: 5s;
animation-name: mouse;
animation-iteration-count: alternate;
}

The damn thing won't run.

Please tell me i didn't code it wrong!

Any help would be graet!