css3-逐帧动画

时间 2019-11-26

标签 css3 css 动画栏目 CSS 繁體版

原文原文链接

time，这里有两个时间，前面一个是规定完成这个动画所须要的时间，全称叫animation-duration，第二个time为动画延迟开始播放的时间，全称叫animation-delay，这两个数值能够用秒’s’也能够用微秒’ms’来写，1000ms=1s，这个不用一一介绍。css

ease：动画缓慢开始，接着加速，最后减慢，默认值;
linear：动画从头至尾的速度是相同的;
ease-in：以低速开始；
ease-out：以低速结束；
ease-in-out：动画以低速开始和结束；

说说这个 steps(n,[ start | end ] ]?)这个阶梯函数，这个函数能够把动画平均划分为基本相等的，这个n是一个天然数，意思就是把一个动画平均分红n等分，直到平均地走完这个动画，这个要跟linear区别开来，由于linear是把动画做为一个总体，中间没有断点，而steps是把动画分段平均执行开来。step-start等同于steps(1,start)，动画分红1步，动画执行时为开始左侧端点的部分为开始；step-end等同于steps(1,end)：动画分红一步，动画执行时以结尾端点为开始，默认值为end。对此，w3c图解以下：
css3

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>css3 逐帧动画</title>
    <style>
        .fly{
            position: absolute;
            left: 100px;
            top: 100px;
            width: 126px;/*单个画面图片宽度*/
            height: 184px;
            background: url(ren.png) no-repeat;/*图片宽度是126*3*/
            
            /*-webkit-animation: run 500ms steps(1) infinite 0s;*/
            
            -webkit-animation: run2 500ms steps(2) infinite 0s;
        }
        /* 动画方式一 */
        @-webkit-keyframes run{

            0%{
                background-position: 0px;
            }
            25%{
                background-position: -126px 0;
            }
            50%{
                background-position: -252px 0;
            }
            100%{
                background-position: 0px;
            }
        }
        /* 动画方式二 */
        @-webkit-keyframes run2{

            50%{
                background-position: -252px 0;
            }
        }
    </style>
</head>
<body>
    <span class="fly"></span>
</body>
</html>