CSS3 animation

animation

  1. 关键帧——keyframes
    • 关键帧的时间单位  数字： 0% 25%  100%等
    • 字符： from(0%)、 to(100%)
    • 格式： @keyframes 动画名称 { 动画状态}
    • demo1如下 
      <style>
    @-webkit-keyframes move {
        0% {
            width: 100px;
        }
        100% {
            width: 500px;
        }
    }
    .box { width: 100px; height: 100px; background: red; -webkit-animation: 2s move;}
</style>
<body>
    <div class="box">
    </div>
</body>
    • 若不写0% 和 100%，则默认都为初始设置的，demo如下 
      <style>
    @-webkit-keyframes move {
        50% {
            width: 500px;
        }
    }
    .box { width: 100px; height: 100px; background: red; -webkit-animation: 2s move ease infinite;}
</style>
<body>
    <div class="box">
    </div>
</body>

       

    • 同时可添加动画运动形式，  linear（匀速）、ease（缓冲）、ease-in（由慢到快）、ease-out（由快到慢）、ease-in-out（由慢到快再到慢）、cubic-bezier（number、number、number、number）特定的贝塞尔曲线类型，4个数值需在[0, 1]区间内，demo见上一个
    • animation-iteration-count，重复次数，可写数值，若为infinite表示无限次，demo见上一个
    • animation-delay，动画延迟（只是第一次）
    • animation-direction属性定义是否应该轮流反向播放动画：normal（动画正常播放）、alternate（动画应该轮流反向播放）
    • 让动画运动完之后停在某个位置，可在class中设置好结尾状态，在0%的时候设置一个初始状态，demo如下 
      <style>
    @-webkit-keyframes move {
        0% {
            width: 100px;
        }
        100% {
            width: 500px;
        }
    }
    .box {  height: 100px; background: red; }
    .move { -webkit-animation: 2s move; width: 500px;}
</style>
<body>
    <div class="box move">
    </div>
</body>

       

    • animation-play-state规定动画正在运行还是暂停，paused（动画暂停）、running（动画正在播放）
    • 以上属性，可分别加前缀 -moz-keyframes , -o-keyframes, keyframes, -webkit-keyframes来支持不同的浏览器
    • 使用animation实现的无缝滚动 
      <style>
        @-webkit-keyframes move {
            0% {
                left: 0;
            }
            100% {
                left: -500px;
            }
        }
        #wrap {width: 500px; height: 100px; border: 1px solid #000; position: relative; margin: 100px auto; overflow: hidden;}
        #list {position: absolute; left: 0; top: 0; margin: 0; padding: 0; width: 200%; -webkit-animation: 3s move infinite linear;}
        #list li {list-style: none; float: left; width: 98px; height: 98px; border: 1px solid #FFF; background: #000; color: #FFF; font-size: 98px; text-align: center;}
        #wrap:hover #list {-webkit-animation-play-state: paused;}
</style><body>
    <div id="wrap">
        <ul id="list">
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
        </ul>
    </div>
</body>

       

posted @ 2015-10-17 11:08  踏浪拾小贝  阅读(182)  评论(0)  编辑  收藏  举报