CSS3 Animation Basics

@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.


Example 1 - Change Background Color

Example 2 - Transform

Example 3