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;}
}
元素:
<div style=”position:absolute;width:100px; height:100px; -webkit-animation: testRule 5s linear”> </div>
说明:
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(根据浏览器内核而定) |
|
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 |
|
|
|
样式动态生成动态引入
styleSheets
chorome中
document.styleSheets //获取所有的样式链表文件内容
var sst = document.styleSheets[0] //获取第0个样式链表
var str = “@keyframes name {0% {left:20px; } 100%{left:60px;}}”;
//将样式str 插入到 第0 个位置的样式文件中
sst.insertRule(str)
//获取第0 个样式文件中第0个样式对象
sst.cssRules[0]
控制Animation播放时间
Dom.style.webkitAnimationDelay = “-” + time + "s";
dom.display = "none";
dom.offsetHeight = "";
dom.display = "block";
2 transform
http://www.w3school.com.cn/cssref/pr_transform.asp