CSS-关键帧动画

关键帧Keyframes,用来指定动画效果的几个中间状态。
语法为：

@Keyframes colorchange {
    0% {
        color: red;
    }
    50% {
        color: blue;
    }
    100% {
        color: green;
    }
}

除了使用百分比，还可以使用from和to

@Keyframes colorchanges {
    from {  //from代表0%
        color: red;
    }
    to {  //from代表100%
        color: green;
    }
}

使用animation调用动画

a:hover {
    -webkit-animation: colorchange 5s ease 1s;
    -moz-animation: colorchange 5s ease 1s;
    -ms-animation: colorchange 5s ease 1s;
    -o-animation: colorchange 5s ease 1s;
    animation: colorchange 5s ease 1s;
}

animation也是一个复合属性

• animation-name
• animation-duration
• animation-timing-function
• animation-delay
• animation-count,可用值为infinite表示无穷，整数表次数
• animation-direction 动画播放方向。normal表示正常向前播放，alternate表述偶数次向前，奇数次反向。
• animation-play-state 播放状态，running表示播放，默认值。paused表示暂停播放。
• animation-fill-mode 描述动画开始和结束之后发生的操作。

属性值	效果
none	默认值，表示动画将按预期进行和结束，在动画完成其最后一帧时，动画会反转到初始帧处
forwards	表示动画在结束后继续应用最后的关键帧的位置
backwards	会在向元素应用动画样式时迅速应用动画的初始帧
both	元素动画同时具有forwards和backwards效果