语法：
   @keyframes animiationName{
                 keyframes-selector{
                      css-style;
                 }
    }

    animiationName:必写项，定义动画的名称
     keyframes-selector：必写项，动画持续时间的百分比
                 from：0%
                 to：100%
     css-style：css声明

       @keyframes move {
            from{
                transform: translate(-150px,0);
            }
            to{
                transform: translate(150px,0);
            }
        }

animation-delay

定义动画开始前等待的时间,以秒或毫秒计(属于动画外的范畴)

值:
<time>
从动画样式应用到元素上到元素开始执行动画的时间差。该值可用单位为秒(s)和毫秒(m s)。如果未设置单位，定义无效

            animation-delay: 2s;

animation-play-state定义了动画执行的运行和暂停

值
   running
       当前动画正在运行。
   paused
       当前动画以被停止。

        .wrap:hover .inner{
            animation-play-state: paused;
        }

animation-fill-mode属于动画外的范畴，定义动画在动画外的状态

backwards：from之前的状态与form的状态保持一致

forwards：to之后的状态与to的状态保持一致

both：backwards+forwards

            animation-fill-mode: both;

animation-direction定义了动画执行的方向

值
   normal
       每个循环内动画向前循环，换言之，每个动画循环结束，动画重置到起点重新开始，       这是默认属性。
   alternate
       动画交替反向运行，反向运行时，动画按步后退，同时，带时间功能的函数也反向，       比如，ease-in 在反向时成为ease-out。计数取决于开始时是奇数迭代还是偶数迭       代
   reverse
       反向运行动画，每周期结束动画由尾到头运行。
   alternate-reverse
       反向交替，反向开始交替

animation-iteration-count定义了动画执行的次数

定义了动画执行的次数（属于动画内的范畴）

值
   infinite
       无限循环播放动画.
   <number>
       动画播放的次数不可为负值.

            animation-iteration-count: infinite;

animation-timing-function动画在每一动画周期中执行的节奏(速率)

linear:线性过渡，等同于贝塞尔曲线（0,0,1,1）
ease:平滑过渡，等同于贝塞尔曲线（0.25,0.1,0.25,1.0）
ease-in:由慢到快，等同于贝塞尔曲线（0.42,0,1,1）
ease-out:由快到慢，等同于贝塞尔曲线（0,0,0.58,1）
ease-in-out:由慢到快再到慢，等同于贝塞尔曲线（0.42,0,0.58,1）
cubic-bezier(1,1,2,3)

steps(n,[start|end])
   传入一到两个参数，第一个参数意思是把动画分成 n 等分，然后动画就会平均地运行。
   第二个参数 start 表示从动画的开头开始运行，相反，end 就表示从动画的结尾开始运行，
   默认值为 end。

            animation-timing-function: linear;

animation-duration属性指定一个动画周期的时长。

默认值为0s，表示无动画。

值
一个动画周期的时长，单位为秒(s)或者毫秒(ms)，无单位值无效。
注意：负值无效，浏览器会忽略该声明，但是一些早起的带前缀的声明会将负值当作0s

            animation-duration: 2s;

示例:

<!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>
        .wrap{
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            margin: auto;
            height: 400px;
            width: 400px;
            border: 1px solid;
        }

        .inner{
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            margin: auto;
            height: 100px;
            width: 100px;
            background-color: pink;

            /* 设置动画名 */
            animation-name: move;
            /* 设置动画延时时间,属于动画外 */
            animation-delay: 2s;
            /* 设置动画一次所用时间 */
            animation-duration: 2s;
            /* 设置运动速度 */
            animation-timing-function: linear;
            /* 设置动画次数 */
            animation-iteration-count: infinite;
            /* 设置动画方向 */
            animation-direction: alternate-reverse;
            /* 设置动画的运行与暂停 */
            animation-play-state: running;
            /* 定义动画在动画外的状态 */
            animation-fill-mode: both;  

            
        }

        @keyframes move {
            from{
                transform: translate(-150px,0);
            }
            to{
                transform: translate(150px,0);
            }
        }

        .wrap:hover .inner{
            animation-play-state: paused;
        }

    </style>
</head>
<body>
    <div class="wrap">
        <div class="inner"></div>
    </div>
</body>
</html>

posted on 2021-07-08 16:07 leiyanting 阅读(133) 评论(0) 收藏举报

刷新页面返回顶部

导航