前言

不是只有JavaScript 或 JQuery 才可以做出动画，现在连CSS也可以啦，於是我就想说先从简单的来试试看好了

关键影格@keyframes

animation 是让 CSS 从一个状态转到另一个状态，藉此来产生动画效果，
而中间转换的过程，需要借助 关键影格(@keyframe) 来达成动画的效果。

语法

我们这里使用 from 和 to，表示在5s的期间内，从一开始(0%)到最後(100%)动画的变化。

@keyframe 自订动画名称 {
    from { left: 0; }
    to { left: 100%; }
}

简单动画范例(一)

首先要先有一个 Div

HTML

<div class="ani">

</div>

CSS

.ani {
    width: 100px;
    height: 100px;
    background: blue;
    display: block;
    position: relative;

    /* animation 参数设定 */
    animation-name: abc;    /*动画名称，需与 keyframe 名称对应*/
    animation-duration: 1s;    /*动画持续时间，单位为秒*/
    animation-delay: 1s;    /*动画延迟开始时间*/
    animation-iteration-count: infinite;    /*动画次数，infinite 为无限次*/    
}

@keyframe abc {
    from { left: 0; }
    to { left: 100%; }
}

当然也可以使用百分比，就会有很多不同时间点的变化

@keyframes 自订动画名称 {
    0% { left: 0; }
    25% { left: 20%; }
    50% { left: 40%; }
    75% { left: 60%; }
    100% { left: 80%; }
}

简单动画范例(二)

HTML

<div class="ani">

</div>

CSS

.ani {
    width: 100px;
    height: 100px;
    background: blue;
    display: block;
    position: relative;

    /* animation 参数设定 */
    animation-name: abc;    /*动画名称，需与 keyframe 名称对应*/
    animation-duration: 1s;    /*动画持续时间，单位为秒*/
    animation-delay: 1s;    /*动画延迟开始时间*/
    animation-iteration-count: infinite;    /*动画次数，infinite 为无限次*/    
}

@keyframe abc {
    0% { left: 400px; top: 0; }
    25% { left: 500px; top: 0; }
    50% { left: 500px; top: 100px; }
    75% { left: 400px; top: 100px; }
    100% { left: 400px; top: 0; }
}

这样使用CSS就可以做出简单的动画啦，明天我们来看看如何在页面滑到特定位置时，执行动画
但不知道明天做不做得出来哈哈，我们铁人赛Day28见罗!!