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:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Animation</title>
<style>
div {
width: 100px;
height: 100px;
margin:0 auto;
border:1px solid #333333;
}
div:hover {
animation: 1s change infinite;
}
@keyframes change {
0% {background-color: #333333;}
100% {background-color: #A52A2A;}
}
</style>
</head>
<body>
<div></div>
</body>
</html>
上面代码中的change就是动画名称，1s就是动画时间。
@keyframes 这个关键字就是用来实现具体的动画。这里是change动画。
infinite关键字用来标示这个动画是无限循环的。没有这个的话，动画是默认播放一遍结束。
那么掌握了这些知识可以做什么，我暂时想到的比如呼吸灯。我记得刚刚开始学习前端的时候，对呼吸灯的实现效果就很好奇，学习了animation就很容易来实现一个呼吸灯。
如下代码，由于自己设计功底不行，就实现了个比较丑的呼吸灯：
<style>
.breathe {
width: 100px;
height: 20px;
border-radius: 10px;
background-color: rgba(23, 255, 178, 0.22);
animation: 3s breathe infinite;
border: 0;
}
@keyframes breathe {
0% {
background-color: rgba(23, 255, 178, 0.22);
}
50% {
background-color: rgba(23, 255, 178, 0.77);
box-shadow: rgba(3, 3, 3, 0.55) 1px 0px 20px;
}
}
</style>
<div class='breathe'>
</div>
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部分：
<div class="fill-model">
</div>
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开发中正占据着越来越重要的位置。
网友评论