css3关键帧已经动画效果(二十)

##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 动画播放在第偶数次向前播放,第奇数次反向播放.

​