当前位置：网站首页>Animation, and basic use of animation

Animation, and basic use of animation

2022-07-20 21:10:00 【Dummerd】

One . Animation （animation） yes CSS3 One of the subversive features of , You can precisely control one or a group of animations by setting multiple nodes , Often used to achieve complex animation effects .

Compared with transition , Animation can make more changes , More control , Continuous automatic playback and other effects

Two . Basic use of animation

Making animation is divided into two steps ：

1. Define animation first

2. Reuse （ call ） Animation

1. use keyframes Define animation （ Similar to defining class selectors ）

@keyframes The name of the animation {

0%{

width:100px

}

100%{

width:200px

}

Animation sequence

0% It's animated Start ,100% It's animated complete , Such a rule is an animation sequence

stay @keyframes To stipulate in CSS style , You can create animation effects that gradually change from the current style to the new one

Animation is the effect of gradually changing elements from one style to another , You can change as many styles as you want, as many times as you want

Please use the percentage to specify when the change will occur , Or use keywords ‘form’ and ‘to’, Equate to 0% and 100%

About the example sentence, the following code

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        /* from and to Equivalent to 0% and 100% */

        div {
            width: 200px;
            height: 200px;
            background-color: aqua;
            /*  The name of the animation   */
            animation-name: move;
            /*  Animation duration  */
            animation-duration: 4s;
        }



        /*  Define animation        The name of the animation itself  */
        /* @keyframes   move{ */
        /*  Start state  */
        /* 0%  perhaps  */
        /* from  {
        transform: translateX(0px);
    }
            End state      100%  perhaps  */
        /* to { 
        transform: translateX(1000px);
    }   
}  */

        /*  Define animation  */
        @keyframes move {
            0% {
                transform: translateX(0);
            }

            25% {
                transform: translate(1000px, 0);
            }

            50% {
                transform: translate(1000px, 500px);
            }

            75% {
                transform: translate(0, 500px);
            }

            100% {
                transform: translate(0);
            }

        }
    </style>

</head>

<body>

    <div>
    </div>
</body>

</html>

3、 ... and . Commonly used attributes in animation

Four . Animation abbreviation properties

animation: The name of the animation The duration of the Motion curve When to start plays In the opposite direction Animation start or end state ;

for example ： animation:myfirst 5s linear 2s infinite alternate;

1. The abbreviated attribute does not include animation-play-state

2. Pause animation ：animation-play-state: puased; It is often used in conjunction with other tools such as the mouse

3. Want to come back , Instead of just jumping back ：animation-direction:alternate

4. After the box animation , Stop at the end ：animation-fill-mode：forwards

Speed curve details

animation-timing-function: Speed curve of specified animation , The default is “ease”

原网站

版权声明
本文为[Dummerd]所创，转载请带上原文链接，感谢
https://yzsam.com/2022/201/202207191927071073.html

当前位置：网站首页>Animation, and basic use of animation

Animation, and basic use of animation

边栏推荐

猜你喜欢

随机推荐