vince.xin/article/5acc34c06b78214ab8ac58bf
前言
在平时的开发过程中，由于我自己在玩项目，没有UI设计给我的设计图，也没有特效要求，所以对CSS动画不是很熟悉，但是作为一个正式进入的人实习单位，萌新程序员总是要准备设计师所需的各种动画，于是就有了这篇文章。
几个容易混淆的css属性
css属性有很多，有些无论是字母的拼写还是字面意思都很容易混淆。 比如我列出的几个属性也让你一头雾水~
属性意义
动画片
它用于设置动画属性。 它是一个缩写属性，包含 6 个属性
过渡
用于设置元素的样式过多，与动画有类似的效果，但细节却有很大不同
转换
它用于旋转、缩放、移动或倾斜元素。 它与风格的动画无关。 相当于设置元素“外观”的颜色。
翻译（移动）
translate只是transform的一个属性值，即联通。
弄清楚这些问题后，我们就可以头脑清晰地学习CSS动画了
过渡
什么是过渡？ 从字面上讲，元素从该属性（颜色）的某个值（红色）过渡到该属性（颜色）的另一个值（绿色）。 这是一个状态转换，触发这些转换需要一个条件，比如我们常用的:hoever、:focus、:checked、媒体查询或者JavaScript。
我们先通过一个简单的demo来看看转场的效果
<!DOCTYPE html>
<html lang="en">
<head>
<title>transition</title>
<style>
#box {
height: 100px;
width: 100px;
background: green;
transition: transform 1s ease-in 1s;
}
#box:hover {
transform: rotate(180deg) scale(.5, .5);
}
</style>
</head>
<body>
<div id="box"></div>
</body>
</html>
影响：
我们来分析一下整个过程。 首先，transition给元素设置的transition属性是transform。 当鼠标移入元素时，元素的变换会发生变化。 那么此时触发transition，生成动画。 当鼠标移出时，变换再次发生变化。 此时仍然会触发转场并生成动画。 因此，过渡形成动画的条件是过渡设置的属性发生变化。 该动画的特点是需要“触发的驱动力”，存在以下不足：
需要由风暴触发，因此无法在页面加载时手动发生
是一次性的，除非重复触发，否则不会重复发生
只能定义开始状态和结束状态，不能定义中间状态，也就是说只有两种状态
语法：transition：属性duration计时-函数延迟；
数值描述
过渡性质
指定设置过渡效果的 CSS 属性的名称
过渡持续时间
指定完成过渡效果需要多少秒或微秒
转换定时函数
速率曲线
转换延迟
定义过渡效应何时开始
动画片
官方介绍中css3 元素移动，该属性是transition属性的扩展，弥补了transition的很多不足。 我理解动画是由多个转场效果叠加而成，可操作性更强，可以做出复杂的疗效（前提是你爱折腾），我们用一个例子来介绍一下动画的威力：
<!DOCTYPE html>
<html lang="en">
<head>
<title>animation</title>
<style>
.box {
height: 100px;
width: 100px;
border: 15px solid black;
animation: changebox 1s ease-in-out 1s infinite alternate running forwards;
}
.box:hover {
animation-play-state: paused;
}
@keyframes changebox {
10% {
background: red;
}
50% {
width: 80px;
}
70% {
border: 15px solid yellow;
}
100% {
width: 180px;
height: 180px;
}
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
分析：
我们先来看看关键帧的关键点。 它定义了一个称为changebox的动画组合。 其中的10%、50%、70%、100%代表的是变化过程中不同时间点的属性值。 比如这个动画的总时间是1s，那么10%就是0-0.1s内的动画。 通过这样我们可以更加精准的控制动画变化中任意时间点属性的效果，极大的增强了我们对动画的控制力，适合复杂的动画基本上我们回过头来看看里面的全部八个值动画。 是不是有点夸张了？ 我还没见过这么长的值。 通过控制动画的各个值，可以非常灵活地控制动画。 我们来理解一下它的句型和值代表什么：
语法：动画：名称持续时间计时-函数延迟迭代-计数方向播放-状态填充-模式；
数值描述
姓名
用于调用@keyframes定义的动画，与@keyframes定义的动画名称一致
期间
指定元素播放动画的持续时间
定时功能
指定速率效果的速率曲线是每个小动画的时间范围内的变化速度
延迟
定义浏览器开始执行动画之前等待的时间，该值是整个动画执行之前等待的时间
迭代次数
定义播放动画的次数，可以选择特定次数或者无限（infinite）
方向
设置动画播放方向：正常（按照时间轴的顺序）、反向（时间轴反向运行）、交替（轮流，即来回）、交替-反向（动画运行先反向再正向，继续交替运行）
播放状态
控制元素动画的播放状态，通过这个来控制动画的暂停和继续，两个值：running（继续）、paused（暂停）
填充模式
控制动画结束后元素的样式css3 元素移动，有四个值：none（返回到动画未开始时的状态）、forwards（动画结束后动画停留在结束状态）、backwords（动画返回到第一帧的状态），两者（根据animation-direction交替应用向前和向后规则），注意不要与iteration-count冲突（动画无限执行）
动画和转场的区别在于，关键帧提供了更多的控制，尤其是时间轴的控制，这让css动画变得更加强大，使得flash的部分动画效果可以直接通过css来控制，而这一切只是只需要几行代码，大量基于css的动画库就诞生了，用来替代flash的动画部分。 在我的项目中，我通常使用Animate.css来设置一些动画。 期待工作中用动画完美实现UI设计师给出的设计图~
写这篇文章的目的就是提醒自己不要混淆这四个属性。 顺便详细解释一下CSS制作动画的方式。 对于简单的一次性动画，建议使用Transition，这样更符合逻辑，更易于维护。 如果遇到比较复杂的动画，这时候可以拿出动画来开始你的表演。 其实动画不仅可以用css来实现，还可以用js来控制元素的样式来实现。 这个时候，你想起来了吗？ 当然，使用setTimeout和setInterval来控制样式来实现动画，但与新的requestAnimationFrame相比，它也可以以更高的性能执行动画。 为给定的功能编写详尽的手册。
文章有错误之处，欢迎指教~
【关于投稿】
如果您有原创好文章可以贡献，请直接给公众号留言。
①消息格式：
【提交】+“文章标题”+文章链接
② 示例：
【投稿】《别再冒充程序员，我十几年的IT职场总结》：
③最后请附上你的个人资料~
发表评论