CSS3 Animations | Properties

animation-timing-function

The animation-timing-function is used to specify the speed curve of an animation. The possible values are shown below:

  • ease – specifies an animation with a slow start, then fast, then end slowly (this is default)
  • linear – same speed from start to end
  • ease-in – slow start
  • ease-out – slow end
  • ease-in-out – slow start and end
  • cubic-bezier(n,n,n,n) – define your own values in a cubic-bezier function

The CSS syntax looks like this:

animation-timing-function: linear;

animation-delay

The animation-delay defines the delay before an animation starts. The CSS syntax looks like this:

animation-delay: 2s;

Note:
The animation-delay and animation-duration values can be defined in seconds (s) or milliseconds (ms).

animation-iteration-count

The animation-iteration-count property determines the number of times an animation repeats.

animation-iteration-count: 5;

To make the animation repeat forever, just use the infinite value:

animation-iteration-count: infinite;

Note:
If you use 0 or a negative number for the animation-iteration-count, the animation will never start.

animation-direction

The animation-direction indicates how the keyframe should be applied. The values can be set as:

  • normal – plays forward from 0 % to 100%
  • reverse – plays from 100 % to 0%
  • alternate – first forward, then backward, then forward
  • alternate reverse – first backward, then forward, then backward

Leave a Reply