What is the usage of keyframes in css3-CSS Tutorial-php.cn

What is the usage of keyframes in css3

WBOY

Release： 2021-12-15 17:36:10

Original

8502 people have browsed it

Keyframes in css are used to specify the animation actions of elements. It is a css rule for creating animations; the keyframe rule consists of the keyword "@keyframe" and the syntax is "@keyframes animation name {keyframes-selector{css -styles;}}".

What is the usage of keyframes in css3

The operating environment of this tutorial: Windows 10 system, CSS3&&HTML5 version, Dell G3 computer.

What is the usage of keyframes in css3

This attribute is closely related to the animation attribute.

Keyframes translated into Chinese means "key frames". If you have used flash, you should understand this better. Of course, if you don't know flash, there will be no problem.

Using the transition attribute can also achieve the transition animation effect, but it is slightly rough because it cannot control the animation process more finely. For example, it can only overall control the transition of a certain attribute within a specified time period, and The animation attribute can use @keyframes to divide the animation within the specified time period more finely.

Syntax structure:

@keyframes animationname {keyframes-selector {css-styles;}}

Copy after login

Parameter analysis:

animationname: declares the name of the animation.

keyframes-selector: Used to divide the duration of animation, you can use percentage form, or you can use "from" and "to" forms. The forms "from" and "to" are equivalent to 0% and 100%. It is recommended to always use percentage form.

The example is as follows:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div{
            width:100px;
            height:100px;
            background-color:pink;
            animation:fadenum 5s infinite;
        }
        @keyframes fadenum{
   100%{transform:rotate(360deg);}
}
    </style>
</head>
<body>
    <div></div>
</body>
</html>

Copy after login

Output result:

What is the usage of keyframes in css3

If you are interested, you can continue to visit:css video tutorial.

The above is the detailed content of What is the usage of keyframes in css3. For more information, please follow other related articles on the PHP Chinese website!