通过 CSS3，我们能够创建动画，这可以在许多网页中取代动画图片、Flash 动画以及 JavaScript。
一、过渡动画 （transition）
过渡动画，就是能让css样式的变化，体现的更明显一点，让用户能更清晰的看见样式的变化。
事件来触发（例如鼠标单击、获得焦点、被点击或对元素任何改变中触发）
过渡相关的属性：
1. transition-property：检索或设置对象中的参与过渡的属性/*all为默认*/
2. transition-duration：检索或设置对象过渡的持续时间/*s或ms为单位*/
3. transition-delay：检索或设置对象延迟过渡的时间 /*同上*/
4. transition-timing-function：检索或设置对象中过渡的动画类型 /*控制过渡动画的速度类型 默认为ease-in-out（先加速后减速）;还有几种 linear(匀速) ease（平滑的过渡） ease-in(加速）ease-out（减速） */
一大堆是不是很吓人，其实我们可以简写：例：transition:all 1s 3s linear;--->>all表示所有属性都参与过渡，并且持续时间为1s,延迟3s,匀速进行！
过渡属性添加的方式：给要参与过渡的元素添加即可。
看下面的案例↓
<style>
*{
margin:0;
padding:0;
}
.box{
width:700px;
height:400px;
background:red;
margin:30px auto;
}
p{
width:100px;
height:100px;
background:orange;
/*添加过渡属性*/
transition:width 3s linear;/*width属性参与过渡，当然也可以不写，默认为all(所有），以匀速进行过渡*/
font-size:30px;
color:#fff;
}
h2{
width:100px;
height:100px;
background:blue;
transition:width 3s ease-in;/*以加速进行过渡*/
color:#fff;
}
/*鼠标滑过*/
.box:hover p{
width:600px;
}
.box:hover h2{
width:600px;
}
</style>
<div class="box">
<p></p>
<h2></h2>
</div>这样当我们鼠标滑过div的时候,p标签和h2标签的宽度从100px到600px的变化过程就能看的更清楚了，不过唯一的不同是他们的速度（即动画类型）不是一致的，但它们是同时完成过渡的，因为我们设置了相同的时间。
利用过渡我们常用来实现导航的图标的变化、颜色、或者鼠标滑过其他样式变化从而达到与用户交互的功能。
看过了过渡动画是不是不过瘾，其实我们利用CSS3能够做到更多的动画效果，那就是接下来的关键帧动画。
二、关键帧动画（animation）
关键帧的定义：
不同于过渡动画只能定义首尾两个状态，关键帧动画可以定义多个状态，或者用关键帧的话来说，过渡动画只能定义第一帧和最后一帧这两个关键帧，而关键帧动画则可以定义任意多的关键帧，因而能实现更复杂的动画效果。
除了与过渡都能定义首尾状态以外，他们还有一个更大的相同点就是相关的属性也特别多↓
1.animation-name
检索或设置对象所应用的动画名称
必须与规则@keyframes配合使用，
eg:@keyframes mymove{} animation-name:mymove;
2.animation-duration
检索或设置对象动画的持续时间
说明：animation-duration:3s; 动画完成使用的时间为3s
3.animation-timing-function
- 检索或设置对象动画的关键帧动画类型
- 属性值
- linear：匀速。等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0)
- ease：平滑。等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0)
- ease-in：由慢到快。等同于贝塞尔曲线(0.42, 0, 1.0, 1.0)
- ease-out：由快到慢。等同于贝塞尔曲线(0, 0, 0.58, 1.0)
- ease-in-out：由慢到快再到慢。等同于贝塞尔曲线(0.42, 0, 0.58, 1.0)
- step-start:马上跳到动画每一结束桢的状态 【tips】可用来制作逐帧动画！
5.animation-delay
+ 检索或设置对象动画延迟的时间
+ 说明：animation-delay:0.5s; 动画开始前延迟的时间为0.5s)
6.animation-iteration-count
+ 检索或设置对象动画的循环次数
+ 属性值
+ animation-iteration-count: infinite | number;
+ infinite：无限循环
+ number: 循环的次数
7.animation-direction
+ 检索或设置对象动画在循环中是否反向运动
+ 属性值
+ normal：正常方向
+ reverse：反方向运行
+ alternate：动画先正常运行再反方向运行，并持续交替运行
+ alternate-reverse：动画先反运行再正方向运行，并持续交替运行
8.animation-play-state
+ 检索或设置对象动画的状态
+ 属性值
+ animation-play-state:running | paused;
+ running:运动
+ paused: 暂停
+ animation-play-state:paused; 当鼠标经过时动画停止，鼠标移开动画继续执行
当然我们同样可以并需要简写，因为实在是太太多了；
简写↓
二.（2）制作关键帧 @keyframes
接下来就是关键帧的制作了，因为我们使用animation属性时第一步就是调用关键帧。
制作关键帧我们通过关键字@keyframes来定义，并且后面空格隔开的是你关键帧的名字，定义关键帧的方式有两种↓
1.只定义首尾状态
@keyframes mymove{
from{初始状态属性}
to{结束状态属性}
}
2.通过百分比定义多个状态
@keyframes mymove{
0%{初始状态属性}
50%（中间再可以添加关键帧）
100%{结束状态属性}
}
<style>
.box{
width:400px;
height:400px;
background:pink;
position:relative;}.movebox{
width:100px;height:100px;background:blue;position:absolute;
/*调用关键帧*/
animation:mymove 5s linear;
-webkit-animation:mymove 5s linear;}
/*制作关键帧*/
@keyframes mymove{
0%{ left:0;top:0;background:blue;}
25%{ left:300px;top:0;background:red;}
50%{ left:300px;top:300px;background:green;}
75%{ left:0;top:300px;background:orange;}
100%{ left:0;top:0;background:blue;}/*谷歌兼容模式*/
@-webkit-keyframes mymove{
0%{
left:0;top:0;background:blue;}
25%{
left:300px;top:0;background:red;}
50%{
left:300px;top:300px;background:green;}
75%{
left:0;top:300px;background:orange;}
100%{
left:0;top:0;background:blue;}}
</style>
<body>
<div class="box">
<div class="movebox"></div>
</div>
</body>在浏览器运行后我们能看见动画效果了。
这里需要注意的是：1.制作关键帧动画时改变的属性必须一一对应起来，否则动画不会运行，例如初始状态下我们设置了left:0;后面就必须也是对left值的改变。
2.@keyframes规则存在兼容问题，不同浏览器需加浏览器前缀；
前缀↓
通过动画我们能实现很多功能，能自己DIY不同的动画效果，今天的分享到此结束！
