4.CSS3 动画属性 animation

1.以下是 @keframes 规则和所有动画属性

@keyframes 规定动画

// 语法 
@keyframes 动画名称 {
  from { // 用from to 或者 0% 100%
    // 这里写属性
  }
  to {
    // 这里写属性
  }
}
// 在一个动画中改变多个 CSS 样式(包括 兼容写法 )
@keyframes mymove {
  0%   {top:0px; background:red; width:100px;}
  100% {top:200px; background:yellow; width:300px;}
}
@-moz-keyframes mymove /* Firefox */
{
0%   {top:0px; background:red; width:100px;}
100% {top:200px; background:yellow; width:300px;}
}
@-webkit-keyframes mymove /* Safari 和 Chrome */
{
0%   {top:0px; background:red; width:100px;}
100% {top:200px; background:yellow; width:300px;}
}
@-o-keyframes mymove /* Opera */
{
0%   {top:0px; background:red; width:100px;}
100% {top:200px; background:yellow; width:300px;}
}

animation 所有动画属性的简写属性,除了 animation-play-state 属性.

animation: 动画名称 动画时间 运动曲线 何时开始 播放次数 是否反方向;

属性1：

animation-name 规定 @keyframes 动画的名称

// 语法
animation-name: keyframename|none;

属性2：

animation-duration 规定动画完成一个周期所花费的秒或毫秒。默认值是 0，意味着没有动画效果。

// 语法
animation-duration: time;

属性3：

animation-timing-function 规定动画的速度曲线.默认是 ease

// 语法
animation-timing-function: value;

值	描述
linear	动画从头到尾的速度是相同的。
ease	默认。动画以低速开始，然后加快，在结束前变慢。
ease-in	动画以低速开始。
ease-out	动画以低速结束。
ease-in-out	动画以低速开始和结束。

属性4：

animation-delay 规定动画何时开始。默认是0。

// 语法
animation-delay: time;

属性5：

animation-iteration-count 规定动画被播放的次数.默认是1

// 语法
animation-iteration-count: n|infinite;

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

属性6：

animation-direction 规定动画是否在下一周期逆向地播放。默认是 normal

// 语法
animation-direction: normal|alternate;

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

属性7：

animation-fill-mode 属性规定动画在播放之前或之后，其动画效果是否可见。

// 语法
animation-fill-mode : none | forwards | backwards | both;

值	描述
none	不改变默认行为。
forwards	当动画完成后，保持最后一个属性值（在最后一个关键帧中定义）。
backwards	在 animation-delay 所指定的一段时间内，在动画显示之前，应用开始属性值（在第一个关键帧中定义）。
both	向前和向后填充模式都被应用。

---

其他属性：多用于音乐图标旋转

animation-play-state 规定动画是否正在运行或暂停.默认是 running

// 语法
animation-play-state: paused|running;

值	描述
paused	规定动画已暂停。
running	规定动画正在播放。

案例1：奔跑的小车

image.png
image.png

// test.html
<img src="img/car.png" />

// test.css
img {
    width: 100px;
    animation: car 5s infinite;
}
@keyframes car{
    0% {
        transform: translate3d(0,0,0);
    }
    50% {
        transform: translate3d(1000px,0,0);
    }
    51% {
        /* 车要掉头，所以翻转 */
        transform: translate3d(1000px,0,0) rotate(180deg);
        /* 如果有多组变形 都属于transform 那我们用空格隔开就好了 */
    }
    99% {
        transform: translate3d(0,0,0) rotate(180deg);
    }
    100% {
        transform: translate3d(0,0,0) rotate(0deg);
    }
}