CSS3<1>：animation-fill-mode，填充模式

引言：虽是前端，但是却不注重CSS，只喜欢写JavaScript，谁知CSS3悄悄推出这么多属性，只能有时间就了解一个

1、animation简写语法：

animation: name(动画名称) duration(动画时长,单位s) timing-function(动画曲线) delay(动画延时)
iteration-count(动画播放次数) direction(是否轮流反向播放动画);

eg.

(1)、动画run，播放时长10s，播放一次，animation: run 10s 1;

(2)、动画run，播放时长10s，延时2秒，播放一次，animation: run 10s 2s 1;

(3)、动画run，播放时长10s，延时2秒，播放一次，animation: run 10s 2s;

默认播放一次。。

2、正题，animation-fill-mode，尽在注释中

<!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>animation-fill-mode</title>
    <style>
        @keyframes run {
            from {
                background: red;
            }

            to {
                background: blue;
            }
        }

        ul li {
            animation: run 10s 2s 1;
            /* delay设置为2s，以看到backwards的效果 */
            margin-bottom: 10px;
        }

        .none {
            animation-fill-mode: none;
            /* 默认行为，动画结束样式不保留 */
        }

        .forwards {
            animation-fill-mode: forwards;
            /* 代表，动画结束保留样式 */
        }

        .backwards {
            animation-fill-mode: backwards;
            /* 代表，动画开始时，先应用动画的第一帧，在animation定义delay属性的时候可以看到效果，
            动画结束样式不保留 */
        }

        .both {
            animation-fill-mode: both;
            /* 代表，设置了forwards和backwards，动画结束样式保留*/
        }
    </style>
</head>

<body>
    <h1>
        animation-fill-mode : none | forwards | backwards | both;
    </h1>
    <ul>
        <li class="none">none</li>
        <li class="forwards">forwards</li>
        <li class="backwards">backwards</li>
        <li class="both">both</li>
    </ul>
</body>

</html>

CSS3<1>：animation-fill-mode，填充模式

猜你喜欢