css3之Animation

transition通过事件来触发动画效果,所以它本身就存在很多局限性。如果我希望动画效果能够自动执行怎么办?这就需要 用到css3的另一个重要 的属性——animation

关键帧

说到animation就不得不说一下关键帧(keyframes),它指定了动画在不同时间段的样式。

@keyframes around{
     0%{transform:translateX(0);}
     25%{transform:translateX(180px);}
     50%{transform:translate(180px,180px);}
     75%{transform:translate(0,180px);}
     100%{transform:translateY(0)}
}

上述代码创建了一个名字为around的关键帧,它指定了动画(时间)在
0%,25%,50%,75%,100%的位置分别为左上,右上,右下,左下,左上(假设div的宽高为180px)。

animation

调用动画——animation:关键帧的动画名称

animation-duration:设置动画完成时间

单位:秒或毫秒

animation-timing-function:过渡函数

参数同transition-timing-function

animation-delay:延迟时间

单位:秒或毫秒

animation-iteraction-count:指定动画的播放次数(默认播放一次)

1.n:播放n次
2.infinite:播放无限次

animation-direction:指定播放方向

1.normal:默认值,每次循环都是正序播放
2.alternate:偶数次循环使反方向播放

animation-fill-mode:指定动画的开始、结束样式

1.none:默认动画结束后返回到0%帧的样式
2.forwards:动画结束后停留在最后的帧的样式
3.backwards:在准备执行动画之前让元素迅速应用动画初始帧的样式
(比如元素透明度为1,0%的样式为透明度为0,在开始动画之前元素的透明度已经是0了,否则就会出现先变为0后开始执行动画的情况)
4.both:forwards+backwards


animation的前四个属性是必须的。

也可以把这些属性写到一起

div span{
   display:inline-block;
   width:20px;
   height:20px;
   background:red;
   border-radius:10px;
   animation:around 10s ease 1s infinite backwards;
}

最终的动画效果:小球从左上角由快到慢到达右上角,再由快到慢到达右下角,再由快到慢到达左下角,最后回到原点并且一直循环下去。
过渡函数会作用的每一帧上,也就是每一帧到达下一帧的动画都是由快到慢。

animation和@keyframes也要写css hack,关键帧的前缀写在@和keyframes之间:@-webkit-keyframes{...}

你可能感兴趣的:(css3之Animation)