一、CSS3 过渡
（一）、CSS3过渡简介
CSS3过渡是元素从一种样式逐渐改变为另一种的效果。
实现过渡效果的两个要件：
- 规定把效果添加到哪个 CSS 属性上
- 规定效果的时长
定义动画的规则
过渡transition （作用） 将元素的某个属性从“一个值”在指定的时间内过渡到“另一个值”
（二）、transition属性
语法 ： {transition： 属性名 持续时间 过渡方法}
- transition-property 属性的名字（如果是一个属性就带有这个属性的名字；如果是多个属性，属性名之间用逗号隔开；如果是所有属性，用all表示即可。）表示对哪个属性进行变化。
- transition-duration 变化持续的时间长度（秒或是毫秒）
- transition-timing-function 过渡实现的方式（比如说，先慢后快/先快后慢），具体实现的时候是以函数来实现的。
- transition-delay 过渡开始前等待的时间，单位为秒或是毫秒。
transition-timing-function 属性取值
- linear 匀速（线型过渡）
- ease 先慢后快再慢
- ease-in 先慢后快
- ease-out 先快后慢
- ease-in-out 开头慢结尾慢，中间快
实例：
原有的状态是灰底红字，鼠标悬停在上面利用transition属性设置了一个3s 之内的变化，背景为由红到蓝的渐变色，文字颜色也逐渐变成白色。
1、首先定义div标签的原始状态，
2、再设置当鼠标悬停在上面的状态。
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>过渡</title>
6 <style>
7 div{
8 height: 100px;
9 width:300px;
10 line-height:30px;
11 border-radius:5px;
12 align-content:center;
13 color:red;
14 background-color: #999;
15 transition:all 1s linear;
16 }
17 div:hover{
18 color:white;
19 /*background-color: #007;*/
20 background:linear-gradient(to bottom,#f0f,#00f)
21 }
22 </style>
23 </head>
24 <body>
25 <div align="center" style="font-size:30px">transition</div>
26 </body>
27 </html>
表现效果：（因为过渡是一个动态的效果，所以下面仅展示初始状态、中间、过渡后的效果）
初始
中间
最后
二、CSS3动画
（一）、CSS3中的动画实现的是什么效果
动画是使元素从一种样式逐渐变化为另一种样式的效果。可以改变任意多的样式任意多的次数。动画效果是通过animation属性来完成的。
用百分比来规定变化发生的时间，或用关键词 "from" 和 "to"，等同于 0% 和 100%。0% 是动画的开始，100% 是动画的完成。为了得到最佳的浏览器支持，应该始终定义 0% 和 100% 选择器。
实现动画效果两要件：
- 1、首先要定义一个动画 ，定义一个@keyframes 规则（关键帧）
- 2、调用动画 动画定义好之后，使用animation 属性调用动画
了解动画的形成原理：
是根据人的“视觉暂留”现象，将一组静止的图形连续出现后，便形成了动画。Flash动画就是基于此原理来制成动画的，时间轴上的每一帧在编辑区中有不同的图形，当时间轴上的帧以当前帧频向前移动时，我们看到的是编辑区中的一组图形不断变化，从而产生了运动的视觉效果
（二）、animation属性设置动画效果
animation属性取值
- @keyframes 规定动画
- animation 所有动画属性的简写属性，除了animation-play-state属性
- animation-name 规定@keyframes 动画名称
- animation-duration 规定一个动画完成的周期所花费的秒或毫秒。默认值为0，
- animation-timing-function 规定动画的速度曲线。默认值为ease
- animation-delay 动画开始前等待的时间。取值可为负（-2s 动画跳过 2 秒进入动画周期），属性不兼容 IE 9以及更早版本的浏览器.
- animation-iteration-count 规定动画播放的次数。默认值为1
- animation-driection 规定动画是否在下一周期逆向地播放。默认值是normal
- animation-play-state 规定动画是否正在运行或暂停。默认值是running
- animation-fill-mode 规定对象动画时间之外的状态
animation-timing-function 属性取值
- linear 匀速（线型过渡）
- ease 先慢后快再慢
- ease-in 先慢后快
- ease-out 先快后慢
- ease-in-out 开头慢结尾慢，中间快
实例：
用动画animation属性实现在位置变化的同时颜色也发生相应的变化。
颜色：由红色—黄色—蓝色—绿色—红色；
位置：距左0px距顶0px—距左200px距顶0px—距左200px距顶200px—距左0px距顶200px—距左0px距顶0px（回到原地）
animation属性：@keyframes(关键帧) 动画名称为mycolor；一个动画周期为5s；动画运动先慢后快再慢ease；动画开始前等待2s；无限(infinite)循环播放；动画正在运行(runing)。
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>动画</title>
6 <style>
7 div{
8 width:400px;
9 height:400px;
10 background:red;
11 position:relative;
12 animation-name:mycolor;
13 /*animation-name规定@keyframes 动画名称*/
14 animation-duration:5s;
15 /*animation-duration规定一个动画完成的周期所花费的秒或毫秒*/
16 animation-timing-function:ease;
17 /*animation-timing-function规定动画的速度曲线*/
18 animation-delay:2s;
19 /*animation-delay规定动画何时开始。默认值为0*/
20 animation-iteration-count:infinite;
21 /*animation-iteration-count规定动画播放的次数*/
22 animation-direction:alternate;
23 /*animation-driection规定动画是否在下一周期逆向地播放*/
24 animation-play-state:running;
25 /*animation-play-state规定动画是否正在运行或暂停*/
26 }
27 @keyframes mycolor
28 {
29 0% {background:red;left:0px; top:0px; }
30 25% {background:yellow; left:200px; top:0px;}
31 50% {background:blue;left:200px; top:200px}
32 75% {background:green;left:0px; top:200px;}
33 100% {background:red;left:0px; top:0px;}
34 }
35 </style>
36 </head>
37 <body>
38 <div></div>
39 </body>
40 </html>
除了可以这样每个属性单独设置，也可以使用animation 的简写属性：
1 div{
2 width:400px;
3 height:400px;
4 background:red;
5 position:relative;
6 animation:mycolor 5s linear 2s infinite alternate;
7 }
原文地址：https://www.cnblogs.com/nyw1983/p/11361089.html