##css3 帧动画 animation @keyframes
animation比较类似于flash中的逐帧动画,就像播放电影.
前面提到的transition只是制定了开始和结束的状态,整个过程还是需要函数来确定.
逐帧动画是由关键帧组成,多个关键帧连续播放就组成了动画,由属性keyframes来完成.
1. @keyframes 关键帧
.animationName: 动画名称,开发人员命名;
.percentage: 百分比值,可以添加多个;
.properties: 样式属性名称, 例如: color, left,width等等数值.
方法一:
@keyframes animationName {
from {
properties: value;
}
percentage {
properties: value;
}
to {
properties: value;
}
}
//or方法二:
@keyframes animationName {
0% {
properties: value;
}
percentage {
properties: value;
}
100% {
properties: value;
}
}
2. animation 动画播放
animation 复合写法
.selector {
animation:[<animation-name> || <animation-duration> || <animation-timing-function> || <animation-delay> || <animation-iteration-count> || <animation-direction>]
[, [<animation-name> || <animation-duration> || <animation-timing-function> || <animation-delay> || <animation-iteration-count> || <animation-direction>] ]*;
}
animation-play-state(实际中可以不设置)
它主要是来控制动画的播放状态:
running
代表播放,而paused
代表停止播放,running
为默认值:PS: animation-play-state 无法通过animation复合书写 只能单例设置 与 transform-origin 一样
.selector {
animation-play-state:running | paused [, running | paused]*;
}
双竖线表示空格. animation里面的属性值可以添加多个
animation-name 动画名称,可以设置多个,用逗号隔开.
animation-duration 动画持续时间,单位是 s 或者 ms.
animation-timing-fuction 和前面的 transition-timing-fuction类似,其值可以是 ease linear ease-in ease-out ease-in-out cubic-bezier(number, number, number).
animation-delay 用来设置动画的开始时间 单位 s 或者 ms,默认值是0;
animation-iteration-count 动画循环次数 默认为1, infinite为无限次循环.
animation-direction 动画播放方向, normal表示向前播放 alternate 动画播放在第偶数次向前播放,第奇数次反向播放.