[CSS] a comprehensive and systematic explanation study notes - Chapter VI CSS animations

A, CSS Animation Overview

1.1, tween

1.1.1、transition

//	1s之后再开始动画
transition-delay: 1s;

If you want all of the converted, you can specify directly

transition: all 1s;

1.1.2、transition-timing-function

1.1.3, the browser animation debugging tools

F12 to open the browser front-end debugging tool browser.

On DevTools press Esc to bring up the animation debug panel.

1.1.4, custom animation progress

Ceaser tools, animation progress

1.2, keyframes animation

This figure is run in the definition of this section @keyframes. 0% and 100% can also be written as shown in FIG.

1.3, frame by frame animation

1.4, face questions