1.transition-property(过渡动画)
div{ -webkit-transition-property:width,height,color; transition-property:width,height,color }
2.transition-duration(过渡动画所需时间)
div{
-webkit-trnasition-duration:5s;
transition-duration:5s;
}
3.transition-timing-function(动画--过渡函数)
ease:默认值,逐渐变慢(cubic-bezier(0.25,0.1,0.25,1))
linear:匀速过渡效果(等于 cubic-bezier(0,0,1,1))
ease-in:加速的过渡效果(等于cubic-bezier(0,0,0.58,1))
ease-out:减速的过渡效果(等于cubic-bezier(0,0,0.58,1))
ease-in-out:加速然后减速(等于cubic-bezier(0.42,0,0.58,1.0))
cubic-bezier(n,n,n,n)0-1之间的数值
div{ -webkit-transition-timing-function:ease-in; transition-timing-function:ease-in; }
4.transition-delay(动画-过渡延迟时间)
div { -webkit-transition-delay:.1s; transition-delay:.1s; }
5.transition(过渡)
transition:[none|<transition-property>]||<transition-duration>||
<transition-timing-function>||<transition-delay>[,*]
自定义动画
1.animation-name(动画名称)
div{
webkit-animation-name:FromLeftToRight;
}
2.keyframes(关键帧)
@keyframes<identifier>{
from{
}
to{
}
}
3.animation-duration(动画时间):
/*动画的持续时间*/
animation-duration:<time>
4.animation-timing-function(动画的过渡速度):
animation-timing-function:ease|linear|ease-in|ease-out|ease-in-out
5.animation-delay(动画延迟时间)
div{
-webkit-animation-delay:1s;
}
6.animation-iteration-count(动画执行次数)
animation-iteration-count:infinite|<number>
div{
-webkit-animation-iteration-count:2;
}
7.animation-direction(动画的顺序)
animation-direction:normal|reverse|alternate|alternate-reverse
normal:正常方向 reverse:反方向运行
alternate:动画先正常运行再反方向运行,并持续交替运行
alternate-reverse:动画先反运行再正方向运行,并持续交替运行
8.animation-play-state(动画的状态)
animation-play-state:running|paused
running:运动 paused:暂停
9.animation-fill-mode
animation-fill-mode:none|forwards|backwards|both
none:默认值,不设置对象动画之外的状态
forwards:设置对象状态为动画结束时的状态
backwards:设置对象状态为动画开始时的状态
both:设置对象为动画结束或开始的状态
10.animation-fill-mode(动画复合属性)