Css3: animation

Enables to animate an element. Every animation consists of the animation properties, e.g. delay and duration, and the related keyframes, which define its appearance.

Compatibility

• -moz-animation *
  • @-moz-keyframes
• -webkit-animation **
  • @-webkit-keyframes
• animation ***
  • @keyframes

Not supported by Firefox prior to version 5, Internet Explorer prior to version 10 and Opera prior to version 12. For detailed compatibility info see caniuse.com.

• * Firefox 5+
• *** Firefox 16+
• ** Safari 5+, Chrome 10+
• *** Internet Explorer 10+
• *** Opera 12.1+

Animation properties

Multiple animations can be specified comma separated. There is also the possibility for separated notations.

animation: animationName 4s linear 1.5s infinite alternate none

• 1 The name of the animation as specified at the keyframes. Many of the available CSS properties can be animated. If set to none no animation is executed.
• 2 The duration of the animation, in this case it lasts 4 seconds. Defaults to 0 meaning that there is no animation at all (which is actually senseless). Negative values are not allowed.
• 3 Optional. The timing-function, which describes how the animation will proceed over its duration. It applies to every single keyframe and not the whole animation and is specified using a bezier curve (and can also be set as one). In the current case the animation is playedlinear without an acceleration or a slowdown. Defaults to ease which results in a fast beginning and a slowdown at the end. ease-out is quite the same but not so fast at the beginning. ease-in accelerates the animation smoothly at the beginning with no slowdown at the end. At last ease-in-out stands for an acceleration at the beginning and a slowdown at the end.
  There is also the possibility of step-values, which let the animation jump between the individual keyframes, whereby step-start omits the first keyframe and step-end the last one.steps(X, start/end) in turn enables to define how many steps are shown between each keyframe, where X stands for the steps and start/end defines if the first or the last keyframe should be omitted (defaults to end if omitted).
• 4 Optional. The animation starts with a delay of 1.5 seconds. If not set or set to 0 the animation will begin immediately, if negative it will begin part-way through its play cycle.
• 5 Optional. The iteration-count defines how often the animation is played. The default value is 1, meaning that it will play from the beginning to the end once. A value of infinite makes the animation to run forever, decimal values cause it to end in between its play cycle.
• 6 Optional. The direction of the animation. If set to alternate every second iteration of the animation is played back to front. Defaults to normal, meaning that every play cycle starts from the beginning.
• 7 Optional. The fill mode. If set to forwards, the last keyframe remains at the end of the animation, as far as the iteration-count (5) is uneven. If set to backwards and a delay (4) is specified likewise, the first keyframe is shown at the start of the animation instead of the normal appearance of the element. both combines these two value, the standard value none omits them.

Keyframes

@keyframes animationName {  	
   0% {top: 0px}  	
   33% {top: 50px; animation-timing-function: ease-out}  
	100% {top: 100px; left: 10px}  
}

• 1 The name of the animation. Links the keyframes to the animation itself and must be the same as 1 at the animation properties.
• 2 A keyframe (as well as 3 and 4). Consits on one side of a percentage value – which determines the placement of the keyframe in the animation -, as well as one or more CSS properties and values that define the state of the animation at this point.
  In this case it’s the starting point of the animation, since it has a percentage value of 0 (can also be defined by the keyword from). At this point the top position of the element is 0px.
• 3 Optional. At 33% of the animation’s time the element is at a top position of 50px, which brought it a bit downwards.
• 4 Optional. Additionally it is possible to set a timing-function per keyframe which overwrites the general timing function set at 3 at the animation properties. Also takes the same values.
• 5 The end of the animation. It’s also possible to use the keyword to instead of 100%. Finally thetop value of the element changes to 80px, moving it further down. Furthermore it has adopted a left position of 10px which moved it a bit right.

Separated notations

Sets the same animation properties like above.

animation-name: animationName

animation-duration: 4s

animation-timing-function: linear

animation-delay: 1.5s

animation-iteration-count: infinite

animation-direction: alternate

animation-fill-mode: none

Example

Two animations specified at once

animation: changeColor 3s infinite, changeSize 2s ease-in 1s infinite

@keyframes changeColor  {  
0% {  		
background-color: red;  		
border-color: black;  	
}  	
100% { 
background-color: green;  		
border-color: yellow;  	
    }  
}  
@keyframes changeSize  {  	
        0% {transform: scale(1)}  	
        65% {transform: scale(1.2)}  	
        100% {transform: scale(1.4)}  
}  

• 1 The first animation for the element has a duration of 3 seconds for each iteration and repeats infinitely. Since there is no timing-function set it defaults to linear.
• 2 The second animation lasts 2 seconds and has a timing-function of ease-in (smooth acceleration at the beginning, no slowdown at the end). It starts after a delay of 1 second and together with the duration of 2 seconds it also last 3 seconds.
• 3 The keyframes for the first animation: The element starts with a background-color of redas well as a border-color of black and finishes with a background-color of green and a border-color of yellow at the end.
• 4 The keyframes for the second animation, which starts at the original size of the element, adopts1.2 times the size at 65% and ends with 1.4 times the size.

Blinking animation

animation: blink 1s step-end infinite

@keyframesblink {  	
  0% {background-color: blue}  	
  50% {background-color: black}  
}  

• 1 One iteration of the animation lasts one second and changes immeditately between its keyframes without a transition. It runs infinitely.
• 2 The background-color changes from blue to black.

For more info see the W3C site, the Safari site and the site at MDN (including compatibility info for older browser versions).

Janeth Kent

Licenciada en Bellas Artes y programadora por pasión. Cuando tengo un rato retoco fotos, edito vídeos y diseño cosas. El resto del tiempo escribo en MA-NO WEB DESIGN AND DEVELOPMENT.