使用CSS3实现动画效果
通过CSS3可以非常方便的实现炫酷的动画效果。
1 |
<div class="wenlie"></div> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
.wenlie{ width:100px; height:100px; background:red; animation:first 5s; -webkit-animation:first 5s; position:relative; } @keyframes first{ 0%{background:red; left:0; top:0;} 50%{background:green; left:30px; top:0px;} 75%{ background:#000; left:30px; top:10px;} 100%{ background:red; left:0; top:0;} } @-webkit-keyframes first{ 0%{background:red; left:0; top:0;} 50%{background:green; left:30px; top:0px;} 75%{ background:#000; left:30px; top:10px;} 100%{ background:red; left:0; top:0;} } |
支持animation属性,需要ie版本大于9
0%,可以用 from 代替
100%,可以用 to 代替
比如:
1 2 3 4 5 6 |
@-webkit-keyframes first{ from{background:red; left:0; top:0;} 50%{background:green; left:30px; top:0px;} 75%{ background:#000; left:30px; top:10px;} to{ background:red; left:0; top:0;} } |
实际上,animate是简写的属性,它一共可以设置6个动画属性,包括:
animation-name:keyframes的名称
animation-duration:动画时长,单位秒s/毫秒ms
animation-timing-function:动画的速度曲线
animation-delay:动画开始前的延时。这个是支持负值的哦。比如-2s,那么动画会跳过2s
animation-iteration-count:动画播放次数。这个可以设置为大于0的整数,或者infinite(此时动画会无限循环)。
animation-direction:是否轮流反向播放。可以设置为alternate或者normal。
alternate的情况下,1,3,5会正常播放;2,4,6反向播放。
如果动画播放次数设置为1,那么,animation-direction 属性设置无效。
另外,还有两个动画属性:
animation-play-state:动画是否正在运行或暂停
animation-fill-mode:规定对象动画时间之外的状态
可以参考:http://codepen.io/zhangwenan/pen/jWEjWX