之前做转盘的时候,用的就是animation,然后加@keyframes。当时时间挺紧张的,就在网上搜了下怎么用,就直接用了。现在有时间了,好好看了一下具体的用法。
—《图解CSS3》
CSS3的animation属性可以像Flash制作动画一样,通过关键帧控制动画的每一步,实现复杂的动画效果。
属性:
animation-name:指定@keyframes关键帧的名字
animation-duration:设置动画播放所需时间,一般以秒为单位
animation-timing-function:设置动画的播放方式
ease|linear|ease-in|ease-out|ease-in-out
animation-delay:动画开始播放的时间,即开始动画前等待的时间
ainimation-iteration-count:动画播放次数,默认为1,如果取值为infinite,则无限循环
animation-direction:动画播放方向 animation-play-state:控制播放状态,running|paused
animation-fill-mode:动画开始前和结束后发生的操作。none|forwards(应用最后关键帧的样式)|backwards(初始帧)|both
今天用到了一个效果,就是页面上要有一个转动的元素,单击这个元素元素停止转动,再次单击,元素重新旋转。
我之前写的代码如下:
<!DOCTYPE html>
<html>
<head>
<title>动画切换</title>
<meta charset="utf-8" />
<