Today were going to go over CSS3 Animation fundamentals.

CSS3 Animation key terms:

@keyframes - Specifies the animation

animation - A shorthand property for all the the animation properties, except the animation-play-state property

animation-name - Specifies the name of the @keyframes animation

animation-duration - Specifies how many seconds or milliseconds an animation takes to complete one cycle. Default 0

animation-timing-function - Describes how the animation will progress over one cycle of its duration. Default “ease”

animation-delay - Specifies when the animation will start. Default 0

animation-iteration-count - Specifies the number of times an animation is played. Default 1

animation-direction - Specifies whether or not the animation should play in reverse on alternate cycles. Default “normal”

animation-play-state - Specifies whether the animation is running or paused. Default “running”

CSS3 Shorthand

animation: myAnimation (name) 30s (duration) linear (timing function) infinite (iteration count) alternate (direction); Everything with in the parentheses is to to help you understand.

DON’T FORGET BROWSER PREFIXES!!!

For more information check out http://www.w3schools.com/css3/css3_animations.asp.
I also found a CSS3 Generator here at http://www.css3animationgenerator.com/.

Happy Coding!

Check out the Demo! Download files!