CSS3:animation-fill-mode,填充模式

版权声明:任先阳 任 先 阳 任先 先阳,nvcc.cc、www.nvcc.cc、sbfox.com、www.sbfox.com https://blog.csdn.net/qq_39571197/article/details/83650166

引言:虽是前端,但是却不注重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>

 

阅读更多

没有更多推荐了,返回首页