Animation properties

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

animation: 1 animationName 2 4s 3 linear 4 1.5s 5 infinite 6 alternate 7 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 played linear 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 1animationName {
	20% {top: 0px}
	333% {top: 50px; 4animation-timing-function: ease-out}
	5100% {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 the top 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.