CSS3动画
CreateTime: 2016-09-07 11:14:32
Author： zhongxia
CSS3的动画效果是一个很有用的功能，可以很方便的实现了早期只能用JS来实现的动画效果。这里主要讲解CSS3的动画
CSS3动画 transition 和 animation
一、transition （过度）
在没有出现transition之前，CSS是没有时间轴的，状态变化是即时完成的。
最简单的使用方法
/*==================最基本用法=====================*/
img{
width:20px;
height:20px;
transition: 1s; /*设置CSS属性变化过度的时间*/
}
img:hover{
width:200px;
height:200px;
}
/*==================完整例子=====================*/
img{
transition: 2s 1s height ease;
}
img{
transition-property: height; /*CSS状态值需要过度的属性*/
transition-duration: 2s; /*过度时间*/
transition-delay: 1s; /*延迟时间*/
transition-timing-function: ease;
/*状态变化速度（ease 逐渐放慢、linear 匀速、ease-in 加速、ease-out 减速、cubic-bezier函数：自定义速度模式）*/
}
cubic-bezier 可以使用工具网站来实现 工具网站
transition的使用注意
各大浏览器（IE10+）支持不加前缀的 transition。
不是所有的CSS属性都只是 transition。 完整列表
transition需要明确知道，开始状态和结束状态的具体数值，才能计算出中间状态。比如，height从0px变化到100px，transition可以算出中间状态。但是，transition没法算出0px到auto的中间状态，也就是说，如果开始或结束的设置是height: auto，那么就不会产生动画效果。类似的情况还有，display: none到block，background: url(foo.jpg)到url(bar.jpg)等等。
transition的局限
transition的优点在于简单易用，但是它有几个很大的局限。
transition需要事件触发，所以没法在网页加载时自动发生。
transition是一次性的，不能重复发生，除非一再触发。
transition只能定义开始状态和结束状态，不能定义中间状态，也就是说只有两个状态。
一条transition规则，只能定义一个属性的变化，不能涉及多个属性。
CSS Animation就是为了解决这些问题而提出的。
二、animation （动画）
/*定义一个动画效果*/
@-webkit-keyframes rainbow {
0% { background: #c00; }
50% { background: orange; }
100% { background: yellowgreen; }
}
@keyframes rainbow {
0% { background: #c00; }
50% { background: orange; }
100% { background: yellowgreen; }
}
div {
width: 200px;
height: 200px;
border: 1px solid black;
}
/*hover 使用这个动画效果*/
div:hover{
-webkit-animation: 1s rainbow;
animation: 1s rainbow; /*默认播放一次*/
}
/*==================animation简写======================*/
animation: 1s rainbow infinite; /*无限次播放*/
animation: 1s rainbow 10; /*播放10次*/
div:hover {
animation: 2s 1s rainbow linear 3 forwards normal;
}
div:hover {
animation-name: rainbow;
animation-duration: 2s;
animation-timing-function: linear;
animation-delay: 1s;
animation-fill-mode:forwards;
animation-direction: normal;
animation-iteration-count: 3;
}
animation-fill-mode: 动画结束以后，会立即从结束状态跳回到起始状态。如果想让动画保持在结束状态，需要使用animation-fill-mode属性。
- none：默认值，回到动画没开始时的状态。
- backwards：让动画回到第一帧的状态。
- both: 根据animation-direction（见后）轮流应用forwards和backwards规则。
animation-direction：动画循环播放后，每次播放完都是回到开始的状态，这个属性可以修改
简单说，animation-direction指定了动画播放的方向，最常用的值是normal和reverse。浏览器对其他值的支持情况不佳，应该慎用。
keyframes
chrome 不支持没有前缀的 @keyframes ,因此需要加上 @-webkit-keyframes, IE10+ 和 Firefox16+ 支持不加前缀的@keyframes
/*from=0% to=100%*/
@keyframes rainbow {
from { background: #c00 }
50% { background: orange }
to { background: yellowgreen }
}
/* 上面的 等于 下面这个写法*/
@keyframes rainbow {
0% { background: #c00 }
50% { background: orange }
100% { background: yellowgreen }
}
@keyframes pound {
from，to { transform: none; }
50% { transform: scale(1.2); }
}
//另外一点需要注意的是，浏览器从一个状态向另一个状态过渡，是平滑过渡。steps函数可以实现分步过渡。
div:hover {
animation: 1s rainbow infinite steps(10);
}
动画播放结束之后，默认回到初始状态，这个时候就需要使用到 animation-play-state
div {
animation: spin 1s linear infinite;
animation-play-state: paused;
}
div:hover {
animation-play-state: running;
}
