在css3中可以实现很多一些动态效果，css3逐步取代了Flash，可以通过他带来的新特性帮助我们轻易解决一些问题，例如图片的圆角可以直接使用border-radius就可以解决，无需再使用ps解决，并且css3可以减少开发和维护成本，并且还能提高页面性能，因为一些动态效果我们不需要再去使用JS就可以完成
过渡：transition
过渡是什么？
我的理解是，当一个元素通过某个条件触发时（例如：hover）改变成另一个属性的过程，更通俗一点来说就是一个人起床到下床，总不会直接就蹦起来准备出门吧，而中间这个穿衣服和洗漱正是过渡的操作
.box{
width: 120px;
height: 120px;
border:10px solid;
position: absolute;
top: 0;
left: 0;
transition: all 0.3s;
}
.box:hover{
left: 50px;
top: 120px;
background: #742;
border: 20px solid #456;
}
transition：all 0.3s 可以解释为一切变化都用0.3s完成
接下来分解transition
transition-property：设置过得的属性
transition-duration：设置过渡所需的时间
transition-timing-function: ease（默认过渡样式）
linear 线性过渡
ease-in 过渡由慢到快
ease-out 过渡由快到慢
ease-in-out 过渡线慢再快
过渡还可以多写
例：transition：margin-left 3s，margin-top 5s;
动画：animiation
这个是干啥的呢？
可以重复并且在相应帧做不同的和多种动画
animiation需要搭配keyframes来使用，
例：
@keyframes run{
from{
background-position: 0 0;
}
to{
background-position: -2400px 0;
}
}
.house{
width: 200px;
height: 100px;
background: url(img.png);
background-repeat: no-repeat;
background-position: 0 0;
animation: run 1s infinite steps(12,end) forwards;
};
先解释 keyframes的作用
标准格式 @keyframes 运动name{
这里有两种写法：
第一种：
form{
background:red 这里表示运动开始的状态，一开始背景颜色为红色
}
to{
background：#000 表示最后为黑色
}
第二种（相应帧）这种通过百分比的可以更细致的规划相应的变化
0%{
background：red
}
50%{
background：#000
}
100%{
background：blue
}
}
然后通过animiation来引用
animiation： 运动名 5s（运动时间） infinite（表示重复播放，不写则只播放一次） step（步数（每个状态切换的步数），end（end表示丢失最后一帧，白柳当前帧的状态，若为start表示丢失第一帧，保留下一帧） forwards（表示当运动结束后保留最后一整的状态，不写则动画结束后回归原始样式） alternate（表示动画倒放））
以上是animiation的多写格式
分布来说：
animiation-name：运动名（也就是keyframes的运动名）
animiation-duration：表示运动时间
animiation-timing-function：linaer 表示线性渐变，这里和过渡的变化一致的
animiation-delay：2s 表示延时2s才开始运动
animiation-itearation-count：2 表示执行2次动画
在animiation中也有hover属性；
animiation-play-state：paused 暂停该动画
原文地址：https://www.cnblogs.com/hzqzwl/p/12168439.html