zoukankan      html  css  js  c++  java
  • css animation 关于step

    此页面中的动画效果都是只用了-webkit前缀的,所以建议用chrome打开此页面

    animation-timing-function

    animation-timing-function 规定动画的速度曲线。速度曲线定义动画从一套 CSS 样式变为另一套所用的时间。在平常的取值中,主要有以下几个:

    描述
    linear 动画从头到尾的速度是相同的。
    ease 默认。动画以低速开始,然后加快,在结束前变慢。
    ease-in 动画以低速开始。
    ease-out 动画以低速结束。
    ease-in-out 动画以低速开始和结束。
    cubic-bezier(n,n,n,n) 在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。

    在这个表中,还有几个属性是没有列出来的,即step-end,step-start,steps(),他们是以一帧一帧的显示动画,这在部分动画中有着重要的意义。三个值的属性各不同,先看示例:

    linear:
     
    step-start:
     


    step-end:
     
    steps(3,start):
     

    代码:

    <style type="text/css">
        @-webkit-keyframes changeColor{
            from,to{background: red;}
            20% {background: blue;}
            60% {background: black;}
        }
        #animation_show div{
            width: 100px;
            height: 100px;
            display: inline-block;
        }
    </style>
    <div id='animation_show'>
        linear:<div style='-webkit-animation:changeColor 10s infinite linear;'></div>
        step-start:<div style='-webkit-animation:changeColor 10s infinite step-start;'></div>
        step-end:<div style='-webkit-animation:changeColor 10s infinite step-end;'></div>
        steps(3,start):<div style='-webkit-animation:changeColor 10s infinite steps(3,start);'></div>
    </div>

    可以看到,其中的差别仅仅是animation-timing-function,可以看出:

    step-start在变化过程中,都是以下一帧的显示效果来填充间隔动画,即在20%(background: blue;)到60%(background: black;)之间,显示的是60%的效果(background: black;)

    step-end与上面相反,都是以上一帧的显示效果来填充间隔动画,即在20%(background: blue;)到60%(background: black;)之间,显示的是20%的效果(background: blue;)

    而steps函数就比较神奇了,它可以传入两个参数,第一个是一个大于0的整数,他是将间隔动画等分成指定数目的小间隔动画,然后根据第二个参数来决定显示效果。第二个参数设置后其实和step-start,step-end同义,在分成的小间隔动画中判断显示效果。可以看出:steps(1, start) 等于step-start,steps(1,end)等于step-end

    这是http://www.w3.org/ 上的一张图片,很好的说明了steps函数的工作机制:

    无js实现图片轮播

    直接上代码,先是css:

    <style type="text/css">
        @-webkit-keyframes slide{
            from,to {left:0px;}
            19% {left: 0px;}
            20% {left: -500px;}
            39% {left: -500px;}
            40% {left: -1000px;}
            59% {left: -1000px;}
            60% {left: -1500px;}
            79% {left: -1500px;}
            80% {left: -2000px;}
            99% {left: -2000px;}
        }
        @-webkit-keyframes dot1{
            from,to {background-position: 0px 0px;}
            20% {background-position: -71px 0px}
        }
        @-webkit-keyframes dot2{
            from,to {background-position: 0px 0px;}
            20% {background-position: 0px 0px;}
            40% {background-position: -71px 0px;}
        }
        @-webkit-keyframes dot3{
            from,to {background-position: 0px 0px;}
            40% {background-position: 0px 0px;}
            60% {background-position: -71px 0px;}
        }
        @-webkit-keyframes dot4{
            from,to {background-position: 0px 0px;}
            60% {background-position: 0px 0px;}
            80% {background-position: -71px 0px;}
        }
        @-webkit-keyframes dot5{
            from {background-position: 0px 0px;}
            80% {background-position: 0px 0px;}
            to {background-position: -71px 0px;}
        }
        *{
            margin: 0px;
            padding: 0px;
        }
        #slide #pic img{
            width: 500px;
        }
        #slide #pic li{
            display: table-cell;
            vertical-align: top;
        }
        #slide ul#pic{
            width: 2550px;
            font-size: 0px;
            position: relative;
            -webkit-animation: slide 20s infinite linear;
        }
        div#slide{
            position: relative;
            width: 500px;
            overflow: hidden;
            margin: 10px;
        }
        #slide #list{
            position:absolute;
            bottom:120px;
        }
        #slide #list li{
            background-image: url('https://images0.cnblogs.com/i/596159/201406/091126025921070.jpg');
            width: 23px;
            height: 23px;
            display: inline-block;
            list-style: none;
            overflow: hidden;
            margin: 0 10px;
        }
    </style>

    然后是html:

    <div id='slide'>
            <ul id='pic'>
                <li><img src="https://images0.cnblogs.com/i/596159/201406/091125061242554.jpg"></li>
                <li><img src="https://images0.cnblogs.com/i/596159/201406/091125329672420.jpg"></li>
                <li><img src="https://images0.cnblogs.com/i/596159/201406/091125413891214.jpg"></li>
                <li><img src="https://images0.cnblogs.com/i/596159/201406/091125484202765.jpg"></li>
                <li><img src="https://images0.cnblogs.com/i/596159/201406/091125543742746.jpg"></li>
            </ul>
            <ul id='list'>
                <li style='-webkit-animation:dot1 20s infinite step-start;'></li>
                <li style='-webkit-animation:dot2 20s infinite step-start;'></li>
                <li style='-webkit-animation:dot3 20s infinite step-start;'></li>
                <li style='-webkit-animation:dot4 20s infinite step-start;'></li>
                <li style='-webkit-animation:dot5 20s infinite step-start;'></li>
            </ul>
        </div>

    然后就是效果了:

    图片都是从百度上拷下来的,希望没有版权问题。。。。

  • 相关阅读:
    在Eclipse里连接Tomcat部署到项目(maven项目和web项目都适用)
    Eclipse里Tomcat报错:Document base ……does not exist or is not a readable directory(图文详解)
    Automatic logon configuration on Linux OS
    uva 10655
    CentOS6.5与window远程桌面配置
    operator= 复制操作符的意外
    Window平台搭建Redis分布式缓存集群 (一)server搭建及性能測试
    安卓自己定义日历控件
    详解2进制,10进制,16进制,8进制,36进制
    HDU 1394 Minimum Inversion Number (线段树 单点更新 求逆序数)
  • 原文地址:https://www.cnblogs.com/cyITtech/p/3777552.html
Copyright © 2011-2022 走看看