一、CSS3动画的作用
通过 CSS3，我们能够创建动画，这可以在许多网页中取代动画图片、Flash 动画以及 JavaScript。二、transition： 平衡过渡
1）作用
css3的transition允许css的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发，并圆滑地以动画效果改变CSS的属性值2）速度效果的速度曲线（动画的速度曲线）：
| 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 | 马上跳到动画每一结束桢的状态 |
曲线图如下：
简写：transition:all/具体属性值 运动时间s/ms 延迟时间s/ms 动画类型
案例如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
*{padding: 0;margin: 0;}
.box{
width: 1020px;
height: 800px;
margin: 0 auto;
}
.con{
width: 500px;
height: 394px;
background:url(./images/bg.jpg);
margin: 10px 10px 6px 0;
float: left;
position: relative;
overflow: hidden;
}
.con img{
position: absolute;
transition-duration: 2s;
}
.con img:nth-child(1){
left: 30px;top: 34px;
width: 437px;height: 317px;
}
.con:hover img:nth-child(1){
width: 285px;height: 203px;
}
.con img:nth-child(2){
left:350px;top: -100px;
}
.con:hover img:nth-child(2){
left:350px;top: 34px;
}
.con img:nth-child(3){
left:100%;top: 143px;
}
.con:hover img:nth-child(3){
left:350px;
}
.con img:nth-child(4){
left:350px;top: 100%;
}
.con:hover img:nth-child(4){
top: 258px;
}
.con img:nth-child(5){
left:184px;top: 100%;
}
.con:hover img:nth-child(5){
top: 258px;
transition-delay: 0.3s;
}
.con img:nth-child(6){
left:30px;top: 100%;
}
.con:hover img:nth-child(6){
top: 258px;
transition-delay: 0.5s;
}
.con4 img:nth-child(1){
left:118px;top: 29px;
width: 257px;height: 340px;
}
.con4:hover img:nth-child(1){
left: 23px;
width: 257px;height: 340px;
}
.con4 img:nth-child(2){
left:100%;bottom: 100%;
}
.con4:hover img:nth-child(2){
left:335px;bottom:198px;
}
.con4 img:nth-child(3){
left:100%;top: 100%;
}
.con4:hover img:nth-child(3){
left:335px;top:207px;
}
</style>
</head>
<body>
<div class="box">
<div class="con">
<img src="./images/con1-1.jpg" alt="">
<img src="./images/con1-2.jpg" alt="">
<img src="./images/con1-3.jpg" alt="">
<img src="./images/con1-4.jpg" alt="">
<img src="./images/con1-5.jpg" alt="">
<img src="./images/con1-6.jpg" alt="">
</div>
<div class="con">
<img src="./images/con2-1.jpg" alt="">
<img src="./images/con2-2.jpg" alt="">
<img src="./images/con2-3.jpg" alt="">
<img src="./images/con2-4.jpg" alt="">
<img src="./images/con2-5.jpg" alt="">
<img src="./images/con2-6.jpg" alt="">
</div>
<div class="con">
<img src="./images/con3-1.jpg" alt="">
<img src="./images/con3-2.jpg" alt="">
<img src="./images/con3-3.jpg" alt="">
<img src="./images/con3-4.jpg" alt="">
<img src="./images/con3-5.jpg" alt="">
<img src="./images/con3-6.jpg" alt="">
</div>
<div class="con4 con">
<img src="./images/con4-1.jpg" alt="">
<img src="./images/con4-2.jpg" alt="">
<img src="./images/con4-3.jpg" alt="">
</div>
</div>
</body>
</html>通过结合以上知识点，可以实现的效果如下，当你鼠标放到盒子里面时，图片飘进来到达指定位置，鼠标滑走之后，图片消失，只剩下一张大图：
三、animation： 动画
一般通过@keyframes 规则，创建动画。 在动画过程中，您能够多次改变这套 CSS 样式。以百分比来规定改变发生的时间，或者通过关键词 "from" 和 "to"，等价于 0% 和 100%。0% 是动画的开始时间，100% 动画的结束时间。
animation vs transition
相同点：都是随着时间改变元素的属性值。
不同点：transition需要触发一个事件(hover事件或click事件等)才会随时间改变其css属性；
而animation在不需要触发任何事件的情况下也可以显式的随着时间变化来改变元素css的属性值，从而达
到一种动画的效果，css3的animation就需要明确的动画属性值animation的属性设置
| animation-name |
调用关键帧的名称 |
| animation-duration |
动画的持续的时间 |
| animation-timing-function |
动画运用的类型（匀速linear、加速度、减速度、贝塞尔曲线） |
| animation-delay |
动画的延迟 |
| animation-iteration-count |
动画运动的次数（默认情况下运动1次） infinite(无限循环) |
animation-direction |
运动的方向 |
| 属性值： - reverse：反方向运行 （ 让关键帧从后往前执行 ） |
|
| - alternate：动画先正常运行再反方向运行，并持续交替运行 |
|
| - alternate-reverse：动画先反运行再正方向运行，并持续交替运行 |
|
| animation-play-state |
属性值： paused暂停 running运动 |
常用的写法：animation:关键帧的名称 动画运动的时间 linear(匀速) 动画延迟的时间
四、关键帧的定义
不同于过渡动画只能定义首尾两个状态，关键帧动画可以定义多个状态，或者用关键帧的话来说，过渡动画只能定义第一帧和最后一帧这两个关键帧，而关键帧动画则可以定义任意多的关键帧，因而能实现更复杂的动画效果。
@keyframes mymove{
from{初始状态属性}
to{结束状态属性}
}
或
@keyframes mymove{
0%{初始状态属性}
50%（中间再可以添加关键帧）
100%{结束状态属性}
}例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin:0;
padding:0;
}
html,body{
height:100%;
}
img{
display:block;
}
.fixed{
position:fixed;
left:0;right:0;
top:0;bottom:0;
margin:auto;
}
body{
background:url(./images/2.jpg) no-repeat;
/* 设置图片大小 */
background-size:100% 100%;
}
/* 轮牌转动 */
.bigImg{
animation: imgRotate 20s linear infinite;
}
.box{
width:768px;
height:768px;
animation: imgRotate 20s linear infinite;
}
/* 把小孩的图片定位在box里面 */
.box img{
/* 改变变形原点 */
transform-origin:center 20px;
/* 让图片反方向转动 reverse*/
animation: imgRotate 20s reverse linear infinite;
}
.pic1{
position:absolute;
left: 43%;
top: 29px;
}
.pic2{
position:absolute;
left: 43%;
bottom: -84px;
}
.pic3{
position:absolute;
left: 12%;
bottom: -22px;
}
.pic4{
position:absolute;
left: 73%;
bottom: -6px;
}
.pic5{
position:absolute;
left: 88%;
bottom: 234px;
}
.pic6{
position:absolute;
left: -3%;
bottom: 226px;
}
.pic7{
position:absolute;
left: 15%;
bottom: 480px;
}
.pic8{
position:absolute;
left: 83%;
bottom: 440px;
}
.box_tit{
position: absolute;
left: 0;top: 0;
right: 0;bottom: 0;
margin: auto;
}
/* 关键帧 */
@keyframes imgRotate{
0%{
transform:rotate(0);
}
100%{
transform:rotate(360deg);
}
}
</style>
</head>
<body>
<img src="./images/fsw.png" alt="" class="bigImg fixed">
<img src="./images/big-title.png" alt="" class="box_tit">
<div class="box fixed">
<img class="pic1" src="./images/girl.png" alt="">
<img class="pic2" src="./images/girls.png" alt="">
<img class="pic3" src="./images/boy.png" alt="">
<img class="pic4" src="./images/dog.png" alt="">
<img class="pic5" src="./images/hairboy.png" alt="">
<img class="pic6" src="./images/mimi.png" alt="">
<img class="pic7" src="./images/mudog.png" alt="">
<img class="pic8" src="./images/shamegirl.png" alt="">
</div>
</body>
</html>效果图：
