animation
android设备必须加webkit前缀才能实现动画效果
animation-name
animation-name:检索或设置对象所应用的动画名称,必须与规则@keyframes配合使用,因为动画名称由@keyframes定义,如果提供多个属性值,以逗号进行分隔。
语法:animation-name: keyframename | none;
1.keyframename--指定要绑定到选择器的关键帧的名称。
2.none : 默认值,指定没有动画(可用于覆盖从级联的动画)
animation-duration
animation-duration:检索或者“设置”对象动画的“持续时间”,手机端添加-webkit- 前缀来兼容
语法 animation-duration :time; time 指定动画播放完成的时间,默认值为0, 意味着没有动画效果
animation-timing-function
animation-timing-function:检测或设置对象动画的过渡类型
语法 animation-timing-function:linear | ease | ease-in | ease-out | ease-in-out 等
animation-delay
animation-delay:动画延时属性
语法 animation-delay:time;默认是0
animation-delay: -2s; 允许负值,-2s使动画马上开始,但会跳过动画的前2s。
animation-iteration-count
animation-iteration-count:动画循环次数
animation-iteration-count : infinite(无限)/ number ( 默认为1 )。
此属性改变的是动画之内的状态,而annimation-delay是动画之外的属性。动画结束后不延迟,直接播放下一次。
animation-direction
normal默认值 reverse反方向
alternate先正后反交替(反转)(前提是要设置循环animation-iteration-count:infinite(这是是无限循环))
alternate-reverse(前提是要设置循环)先反再正,交替
animation-fill-mode
animation-fill-mode:规定当动画不播放时(当动画完成或当动画有延迟未开始播放时),要应用到元素的样式。
语法 animation-fill-mode:none | forwards | backwards | both | initial | inherit;
none:默认值。不设置对象动画之外的状态;
forwards:设置对象状态为动画结束时的状态;
backwards:设置对象状态为动画开始时的状态;
both:设置对象状态为动画结束或开始的状态;
animation-play-state
animation-play-state:指定动画是否正在运行或已暂停。
语法 animation-play-state:paused | running;
paused:指定暂停动画; running:默认值,指定正在运行的动画。
一般配合javascript使用,使用hover也能实现效果
animation简写
animation : name duration timing-function delay iteration-count direction fill-mode play-staye ;
@keyframes
关键帧,可以指定任何顺序排列来决定animation动画变化的关键位置。
使用说明:使用@keyframes规则创建动画,通过逐步改变从一个CSS样式设定到另一个。在动画过程中可以通过@keyframes规则多次更改CSS样式的设定。
语法:
@-webkit-keyframes animationname{
keyframes-selector{
css-style;
}
}
//-webkit- 是为了兼容手机端
keyframes-selector:必写项,动画持续时间的百分比,0-100%、from(0%)、to(100%)。
css-style:必写项,一个过多个合法的css样式属性。
CSS3 will-change
增强页面渲染性能,will-change提前通知浏览器元素将要做什么动画,让浏览器提前准备合适的优化设置
语法 will-change:auto | scroll-position | contents | <custom-ident> | <animateable-feature>
auto:此关键字表示没有特定的意图,适用于它通常所做的任何启发式和优化。
scroll-position:表示将要改变元素的滚动位置。
contents:表示将要改变元素的内容。
<custom-ident>:明确指定将要改变的属性与给定的名称 如 will-change:transform;建议使用这个
<animateable-feature>:可动画的一些特征值,如 will-change:left / top / margin 等
使用注意:勿滥用、提前声明、remove(使用hover或者JavaScript释放)