CSS3动画基础学习之Animation部分

阮老师的学习教程

Animation（动画）

在学习animation之前，只能看着别人的很炫的动画效果，很羡慕。学习了阮一峰老师的这个CSS动画教程以后，其实还是做不出来很炫的，不过，基本的动画效果已经可以实现。

1、基础部分

首先：animation包含下面几个部分
1、animation-name ： 动画名称
2、animation-duration ： 动画持续时间
3、animation-timing-function ： 动画的状态变化速度曲线
4、animation-delay ： 动画延时进行时间
5、animation-iteration-count ： 定义动画播放的次数。可以是固定的数字或者infinite（重复播放）
6、animation-fill-modal ： 动画完成时应该停留在哪个节点，可配合animation-direction使用
7、animation-direction ： 定义动画循环播放时的 方式
8、animation-play-state ： 指定动画暂停还是继续运行
9、@keyframes ： 指定动画的实现
由于234与transition大同小异，就不做介绍
CSS3动画基础学习之transition
最基础的动画是由一个动画名称和一个动画时间构成的,如下代码，在触发hover事件后，开始animation:

上面代码中的change就是动画名称，1s就是动画时间。
@keyframes 这个关键字就是用来实现具体的动画。这里是change动画。
infinite关键字用来标示这个动画是无限循环的。没有这个的话，动画是默认播放一遍结束。
那么掌握了这些知识可以做什么，我暂时想到的比如呼吸灯。我记得刚刚开始学习前端的时候，对呼吸灯的实现效果就很好奇，学习了animation就很容易来实现一个呼吸灯。
如下代码，由于自己设计功底不行，就实现了个比较丑的呼吸灯：

2、animation-fill-modal

animation-fill-modal有以下几种属性

animation-fill-modal: none //none是默认属性，表示回到动画没开始的时候的状态。
animation-fill-modal: backwards //backwards是回到动画第一帧，也就是0%
animation-fill-modal: forwards //forwards停留在动画的最好一帧，结束状态
animation-fill-modal: both //这个要结合animation-direction属性，交替应用forwards和backwards

3、animation-direction

animation-direction定义了在循环播放动画时的方式，允许我盗取大佬的一张图表示：

image.png

就这一张图，不需要再多的解释都可以很清晰的理解animation-direction的四个属性的用法了。注意要配合
animation-fill-modal：both使用。

4、animation-play-state

我利用这个属性实现了一个随时暂停的上下滑动的div块
html部分：

CSS部分：

.fill-model {
    margin-top: 20px;
    animation: 3s change linear both infinite normal;
}
.fill-model:hover {
    animation-play-state: paused;
}
@keyframes change {
    from {
        background-color: #333333;
        margin-top: 20px;
    }
    to {
        background-color: #A52A2A;
        margin-top: 80px;
    }
}

最后，个人认为animation还有很多东西需要去深入学习。CSS在web开发中正占据着越来越重要的位置。