css3动画animation
关于动画animation的设置,主要有两部曲,它们分别是:
一、关键帧的设置
关键帧的设置,一定要加上各个浏览器的前缀名方可使用。
1.百分比写法
@keyframes 关键帧名{
时间的百分比{css设置}
}
2.from、to写法
@keyframes 关键帧名{
from{初始的css样式}
to{动画结束的css样式}
}
二、给选定的元素绑定关键帧
元素{
animation:关键帧名 动画时间 延迟执行时间 运行次数 动画模式 是否交替 动画结束后停留位置;
}
1)关键帧名 animation-name:我们设置的关键帧名
2)动画时间 animation-duration:单位为s/ms
3)延迟执行时间 animation-delay:单位为s/ms
4)运行次数 animation-iteration-count:infinite(无限次)/number;
5)动画模式 animation-timing-function:ease/linear/ease-in/ease-out/ease-in-out
ease 逐渐变慢
linear 匀速
ease-in 缓慢开始(加速)
ease-out 缓慢结束(减速)
ease-in-out 先加速后减速
6)是否交替 animation-direction:normal(默认)/reverse(反向)
7)动画结束后停留位置 animation-fill-mode:none(默认)/forwards/backwards/both
none 默认值,不设动画外的状态(开始)
forwards 停留在结束状态
backwards 停留在开始状态
both 停留在开始或结束状态(结束)
8)动画运行/暂停 animation-play-state:running(默认)/paused(暂停)
注(ˉ(∞)ˉ) :在animation的简写里,是不可以设置该属性的,所以必须通过该属性的全写进行设置。
转载请注明出处,谢谢哒。。。。。。。