CSS3(animation, trasfrom)总结

1. Animation

样式写法:

格式: @-浏览器内核-keyframes 样式名 {}

标准写法(chrome safari不支持

@keyframes [样式名] {

0% {left: 10px ; top : 20px;}

50% {left: 20px ; top : 30px;}

100% {left: 10px ; top : 20px;}

};

Firefox

@-mz-keyframes [样式名] {

0% {left: 10px ; top : 20px;}

50% {left: 20px ; top : 30px;}

100% {left: 10px ; top : 20px;}

};

Chrome & Safari

@-webkit-keyframes [样式名] {

0% {left: 10px ; top : 20px;}

50% {left: 20px ; top : 30px;}

100% {left: 10px ; top : 20px;}

};

Opern

@-o-keyframes [样式名] {

0% {left: 10px ; top : 20px;}

50% {left: 20px ; top : 30px;}

100% {left: 10px ; top : 20px;}

};

或者是

@keyframes [样式名] {

from {left:0px; top:10px;}

to {left:20px; top: 50px;}

}

样式引用:

Style=”animation:样式名时间播放曲线”

eg:

样式:

@-webkit-keyframes testRule {

20% {left:100px; top:50px;}

40% {left:50px; top: 100;}

60% {left:50px; top: 50;}

80% {left:100px; top: 0;}

100% {left:0px; top:0px;}

}

元素:

说明:

0s- 1s DIV从最开始位置到 {left:100px; top:50px;}

1s -2s {left:100px; top:50px;} 到 {left:50px; top: 100;}

2s -3s {left:50px; top: 100;} 到 {left:50px; top: 50;}

3s - 4s {left:50px; top: 50;} 到 {left:100px; top: 0;}

4s - 5s {left:100px; top: 0;} 到 {left:0px; top:0px;}

CSS3 Animation 所具有的属性:

@keyframes 所有规定动画

Aniamtion: 所有规定动画简写属性, 除了animation-play-state 属性

Animation-name 规定@keyframes 动画的名称

Animation-duration 规定动画完成一个周期所花费的秒或毫秒. 默认是 0

Animation-timing-function:规定动画的速度曲线.默认是 0

Aniamtion-delay 规定动画从什么时候开始默认是0

Aniamtion-iteration-count 规定动画播放几遍默认是1

Animation-direction 规定动画是否在下一周期逆向地播放. 默认是 ” normal”

Animation-play-state :规定动画的当前状态 “paused” or “running” .默认是 ”running”

Animation-fill-mode :规定对象动画时间之外的状态

ps:Animation-play-state : 当在移动端使用时, 如果样式中存在trasfrom 则会不起作用(原因未知)

CSS3属性对应 dom对象属性

Aniamtion	Dom.style.webkitAnimation(根据浏览器内核而定)
Aniamtion	Dom.style.animation
Animation-name	Dom.style.webkitAnimationName
Animation-duration	Dom.style.webkitAnimationDuration
Animation-timing-function:	Dom.style.webkitAnimationTimingFunction
Aniamtion-delay	Dom.style.webkitAnimationDelay
Aniamtion-iteration-count	Dom.style.webkitAnimationIterationCount
Animation-direction	Dom.style.webkitAnimationDirection
Animation-play-state	Dom.style.webkitAnimationPlayState
Animation-fill-mode	Dom.style.webkitAnimationFillMode