CSS3过渡跟动画
这两者的区别，很简单，
过渡就是字面上意思，比如，宽度从1px，慢慢增加到10px，这便是一种过渡；
动画，也是字面上意思，不过跟过渡最大的区别就是最终的状态，不管执行了什么动画，最终的状态会还原，比如说宽度从1px，慢慢增加到10px，动画结束后，会还原到1px。
举几个例子，举一反三即可。
1、过渡属性：
transition: width 1s linear 2s;
// 等价于
transition-property: width;
transition-duration: 1s;
transition-timing-function: linear;
transition-delay: 2s;
实例（鼠标悬浮在div上，3秒后，宽度从150px，2秒的时间均匀增长到400px，然后停止）
div {
width: 150px;
height: 100px;
background: blue;
transition: width 1s linear 3s;
}
div:hover {
width: 400px;
}
2、动画属性
animation-name: myfirst;
animation-duration: 5s;
animation-timing-function: linear;
animation-delay: 2s;
animation-iteration-count: infinite;// 动画循环次数，永久
animation-direction: alternate;// 动画一个周期结束后，倒序播放，正常是 normal
animation-play-state: running;
// 等价于
animation: myfirst 5s linear 2s infinite alternate;
// 动画名称的两种写法
@keyframes myName1 {
from {
background: red;
}
to {
background: yellow;
}
}
@keyframes myName2 {
0% {
background: red;
}
50% {
background: green;
}
100% {
background: blue;
}
}
实例（div的背景颜色从红色->绿色->蓝色，蓝色->绿色->红色，无限循环）
div
{
animation: myfirst2 5s linear 2s infinite alternate;
}
|
