CSS3 animation 属性 && @keyframes规则

animation 属性是一个简写属性，用于设置六个动画属性：

值	描述
animation-name	规定需要绑定到选择器的 keyframe 名称。。
animation-duration	规定完成动画所花费的时间，以秒或毫秒计。必须带单位
animation-timing-function	规定动画的速度曲线。
animation-delay	规定在动画开始之前的延迟。必须带单位
animation-iteration-count	规定动画应该播放的次数。
animation-direction	规定是否应该轮流反向播放动画。

---

CSS3 animation-name 属性 – animation第1个参数
为 @keyframes 动画规定一个名称：

值	描述
keyframename	规定需要绑定到选择器的 keyframe 的名称。
none	规定无动画效果（可用于覆盖来自级联的动画）。

语法

animation-name: keyframename|none;

---

CSS3 animation-duration 属性 – animation第2个参数–必须带单位s/ms
为 @keyframes 动画规定一个时间：

animation-duration: time;

---

CSS3 animation-timing-function 属性 – animation第3个参数
从开头到结尾以什么速度来播放动画：

值	描述
linear	动画从头到尾的速度是相同的。
ease	默认。动画以低速开始，然后加快，在结束前变慢。
ease-in	动画以低速开始。
ease-out	动画以低速结束。
ease-in-out	动画以低速开始和结束。
cubic-bezier(n,n,n,n)	在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。

语法

animation-timing-function: value;

---

CSS3 animation-delay 属性 – animation第4个参数–必须带单位s/ms
规定在动画开始之前的延迟。

animation-delay: time;

---

CSS3 animation-iteration-count 属性 – animation第5个参数
规定动画应该播放的次数。

值	描述
n	定义动画播放次数的数值。
infinite	规定动画应该无限次播放。

语法

animation-iteration-count: n|infinite;

---

CSS3 animation-direction 属性 – animation第6个参数
规定是否应该轮流反向播放动画。

值	描述
normal	默认值。动画应该正常播放。
alternate	动画应该轮流反向播放。

语法

animation-direction: normal|alternate;

示例代码

.image{
    animation:xuanzhuan 5s linear 0s infinite
}

CSS3 @keyframes 规则

值	描述
animationname	必需。定义动画的名称。
keyframes-selector	必需。动画时长的百分比。合法的值：0-100%。from（与 0% 相同）to（与 100% 相同）
css-styles	必需。一个或多个合法的 CSS 样式属性。

@keyframes animationname {keyframes-selector {css-styles;}}

示例代码

@keyframes xuanzhuan {
    from {
        transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
    }
    to {transform: rotate(360deg);
        -webkit-transform: rotate(360deg);

    }
}

---