CSS3动画
animation
一、animation-name
检索或设置动画名称
animation-name:keyframename | none;
keyframename 绑定到选择器的关键帧名称(后面详细做笔记)
none: 指定有没有动画
二、animation -duration
animation-duration：time
默认值是0 没有动画效果
三、animation-timing-function
和CSS3transition用法相似
四、animation-delay
动画延迟
五、animation-iteration-count
循环播放次数
animation-iteration-count：infinite | none ;
infinite 无限次播放
六、animation-direction
是否反方向运动
animation-direction：normal reverse alternatealternate-reverse initial inherit
normal正常方向
reverse反方向运行
alternate 先正常运行 在反方向运行
alternate-reverse 先反方向运行，在正方向运行
七、animation-fill-mode
规定当动画不播放的时，（当动画延迟播放或者已经播放完成的时候），要应用的元素的样式
animation-fill-mode:none | forwards | backwards | both
none 不设置对象动画之外的状态
forwards设置为动画结束时的状态
backwards 设置为动画开始时的状态
both 设置对象状态为动画结束或开始的状态
八、animatiton-play-state属性
指定动画是在运行还是暂停
animatiton-play-state:paused | running
九、keyframename
@keyframename animationname{
keyframes-selector{
css-styles;
}
}
animationname:必写项，定义animation的名称。
keyframes-selector:必写项，动画持续时间的百分比，0-100%、from(0%)、to(100%)。
css-styles：:必写项，一个或多个合法的CSS样式属性。
例子：
@-webkit-keyframes example {
0%(或者from) { transform:rotateX(0deg); }
25% { transform:totateX(45deg); }
75% { transform:totateX(315deg); }
100%(或者to) { transform:totateX(350deg); }
}
@keyframes example {
0%(或者from) { transform:rotateX(0deg); }
25% { transform:totateX(45deg); }
75% { transform:totateX(315deg); }
100%(或者to) { transform:totateX(350deg); } }
十、will-change
一开始用 translateZ() (or translate3d()) Hack 触发GPU加速，但是占用RAM和GPU储存空间。
will-change会提前通知浏览器将要做什么动画，让浏览器提前做准备。
will-change:auto | scroll-position | contents | <custom-ident> |<animateale-feature>
auto 没有特定意图，适用于通常所做的任何启发式和优化。
scroll-position 将要改变元素的滚动位置。
contents 将要改变元素内容
<custom-ident> 明确改变的属性和名称
<animateale-feature> 动画的一些特征值，top left等
注意：
不能滥用，要移除、提前声明。
