“This is the 25th day of my participation in the Gwen Challenge.

preface

CSS timing-function CSS timing-function CSS timing functions are also known as easing functions. It is a (mathematical) function that specifies the speed over time of an object being animated or converted from one value to another. It describes how transitions or animations will take place over a period of their duration. It can use one of several predefined keywords to define common timing functions. It is used as the attribute value of transition-timing-function and animation-timing-function. Let’s take a look at these two CSS properties.

transition-timing-function

The transition-timing-function property is used to specify a timing function that defines the speed at which an object is converted from one value to another.

Transition-timing-function takes the timing function as a value. It describes how the transition will proceed over its one cycle and allows it to change speed as it goes along.

If you define multiple transitions on an element, for example, if you want to transition the element’s background color and its position, you can specify multiple timing functions, each corresponding to a property specified using the transition-property property.

It is usually more convenient to specify transition-timing-function in the CSS transition shorthand property. Such as:

transition: left 1s ease-in-out, background-color 1s ease-out 1s;
Copy the code

Ease-in-out and ease-out specify the velocity change rule of the left coordinate and background color respectively.

The official grammar

• Grammar:

transition-timing-function: <timing-function>
Copy the code

• The initial value:ease
• Applies to: all elements; and::before 和 ::afterPseudo elements
• Can be animated: No

Attribute values

, all optional values can refer to the previous article, CSS timing-function, this article has all optional details and demo.

Usage examples

The transitions from one background color to another while hovering are specified below using predefined timing function keywords.

.element {
    background-color: # 009966;
    transition-property: background-color;
    transition-duration:.3s;
    transition-timing-function: ease-out;
}

.element:hover {
    background-color: #0099CC;
}
Copy the code

All of the following converted timing function values are valid:

transition-timing-function: linear;
transition-timing-function: cubic-bezier(0.42.0.1.1); /* equivalent to the "ease-in" keyword */
transition-timing-function: steps(4, start); /* make transition over 4 steps */
transition-timing-function: ease-in-out;
Copy the code

The online Demo

Check out the CSS transition-timing-function demo

animation-timing-function

The animation-timing-function property is used to specify a time function that defines how fast the animated object changes over time. It describes how the animation will proceed over a period of its duration, allowing it to change speed during its course.

Animation-timing-function takes the timing function as a value.

If multiple animations are applied to an element, you can specify multiple timing functions, each for the corresponding animation specified using the animation-name attribute.

The specified timing function applies to each iteration of the animation, not the entire animation. For example, if the animation has animation timing: ease-in-out; And animation – iteration – count: 2; , it will slow in at the beginning, slow out near the end of the first iteration, slow in at the beginning of the second iteration, and slow the animation again near the end.

In addition to being able to specify timing functions for the entire animation, you can also specify animation timing functions for individual keyframes of an animation within keyframe rules, which are used to animate elements in that keyframe as they enter the next keyframe (for examples, see the Examples section below). If no timing function is specified for the keyframe, the timing function specified for the entire animation is used.

For keyframe animation, timing works between keyframes rather than the entire animation. In other words, the timing function is applied to the start and end of the keyframe.

It is usually more convenient to specify animation-timing-function in the CSS animation shorthand property. The syntax of animation is as follows:

/* syntax of one animation definition */
animation: [animation-name] [animation-duration] [animation-timing-function] [animation-delay] [animation-iteration-count] [animation-direction] [animation-fill-mode] [animation-play-state];

/* two animation definitions */
animation: [animation-name] [animation-duration] [animation-timing-function] [animation-delay] [animation-iteration-count] [animation-direction] [animation-fill-mode] [animation-play-state],
           [animation-name] [animation-duration] [animation-timing-function] [animation-delay] [animation-iteration-count] [animation-direction] [animation-fill-mode] [animation-play-state];
Copy the code

The official grammar

• Grammar:

animation-timing-function: <timing-function>
Copy the code

• Initial value: ease
• Applies to: all elements; And ::before and ::after pseudo-elements
• Can be animated: No

Attribute values

, all optional values can refer to the previous article, CSS timing-function, this article has all optional details and demo.

Usage examples

The following example applies animation-timing-function to two animations of an element:

.element {
    animation-name: rotate, fall;
    animation-timing-function: ease-in, ease-in-out;
} 
Copy the code

The following example applies animation-timing-function to each keyframe within the @keyframes rule:

@keyframes bounce {

  from {
    top: 100px;
    animation-timing-function: ease-out;
  }

  25% {
    top: 50px;
    animation-timing-function: ease-in;
  }

  50% {
    top: 150px;
    animation-timing-function: ease-out;
  }

  75% {
    top: 75px;
    animation-timing-function: ease-in;
  }

  to {
    top: 100px; }}Copy the code

All of the following conversion timing function values are valid

animation-timing-function: linear;
animation-timing-function: cubic-bezier(0.42.0.1.1); /* equivalent to the "ease-in" keyword */
animation-timing-function: steps(4, start); 
animation-timing-function: ease-in-out;
Copy the code

The online Demo

The first element in the following demo has keyframe animation and timing functionality that applies to the overall animation. The second element has keyframe animations and timing functions that apply to each individual keyframe, rather than to the entire animation.

Check out the CSS animation-timing-function demo

Animation-timing-function () : animation-timing-function () : animation-timing-function

Reference thanks

• transition-timing-function
• animation-timing-function