一、过渡动画 （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不同的动画效果，今天的分享到此结束！
原文：https://www.cnblogs.com/huSheep/p/12358275.html