VIDEO TUTORIAL
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/.