animation-timing-function

Using the animation-timing-function property, you can specify how the animation will progress between keyframes: evenly, or fast at first, then slow, or according to some complex internal laws.

        
          
          .element {  animation-name: circle-to-square;  animation-duration: 2s;  animation-iteration-count: infinite;  animation-direction: alternate;  animation-timing-function: ease-in;}
          .element {
  animation-name: circle-to-square;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-timing-function: ease-in;
}

        
        
          
            
            Copy
            Copied
            Failed to copy
          
        
      

Animations came to the web in an attempt to erase the boundary between the real world and the computer world. In the real world, things do not change their properties instantly. A ball moves from your hand to the floor not immediately, but smoothly changing its position in space.

CSS animations play by default linearly, changing the properties of an element in equal increments over equal intervals of time. Such behavior rarely occurs in real life. The same ball starts its movement slowly and accelerates over time.

The animation plays evenly, without fluctuations in speed.

The animation starts slowly, then quickly accelerates and slows down again at the end. Default value.

The animation starts slowly and accelerates smoothly towards the end.

The animation starts quickly and slows down smoothly towards the end.

The animation starts and ends slowly, accelerating in the middle.

A timing function that describes the type of acceleration in the form of a Bezier curve.

On the x axis is the timeline of the animation, and on the y axis — the progress of the animation. This is a very powerful tool for creating diverse animations with complex internal laws.

Values x1 and x3 must be in the range from 0 to 1 inclusive. By setting values x2 and x4 less than 0 or greater than 1, you can achieve a spring effect.

Rarely do developers write this function from scratch. Most often, a visualization tool is used to adjust the values and immediately see what the animation will look like.

One of the most popular tools is cubic-bezier.com.

Sets a step animation, breaking it into segments, with changes occurring at the beginning of each step.

Step animation, with changes occurring at the end of each step.

A function specifying that the animation should play in steps, sharply transitioning from one state to another.

The first parameter indicates how many segments the animation should be broken into. The value must be a positive integer greater than 0.

The second parameter is optional and specifies the step position, the moment when the animation starts. Possible values:

• jump-start — the first step occurs at a value of 0.
• jump-end — the last step occurs at a value of 1.
• jump-none — all steps occur within the range from 0 to 1 inclusive.
• jump-both — the first step occurs at a value of 0, the last — at a value of 1.
• start — behaves like jump-start.
• end — behaves like jump-end.

With the value start, the animation starts at the beginning of each step; with the value end, it starts at the end of each step with a delay. The delay is calculated as the result of dividing the animation time by the number of steps. If the second parameter is not specified, the default value end is used.

It is very difficult to imagine what the animation will look like with each of these values. It will be much more informative to have a demo: