1. @keyframes 动画名称 {
    2.   0% /* from */ {
    3.     width: 100px;
    4.   }
    5.   100% /* to */ {
    6.     width: 500px;
    7.   }
    8. }
    10. div {
    11.   width: 100px;
    12.   height: 100px;
    13.   background-color: red;
    14.   animation-name: 动画名称;
    15.   animation-duration: 持续时间;
    16. }
    属性 描述
    @keyframes 定义动画
    animation 所有动画属性的简写
    除了animation-play-state
    animation-name 使用@keyframes动画的名称(必须)
    animation-duration 动画完成一周期的时间(必须)
    默认：0
    animation-timing-function 动画速度的曲线
    默认：ease
    animation-delay 动画何时开始(单位s)
    默认：0
    animation-iteration-count 动画播放次数(infinite)
    默认：1
    animation-direction 动画是否在下一个周期逆向播放(alternate)
    默认：normal
    animation-play-state 动画是否正在运行或暂停(paused)
    默认：running
    animation-fill-mode 动画结束后的状态(forwards)
    默认：backwards    		 
    1. div {
    2.   animation: 动画名称 持续时间 运动曲线 何时开始 播放次数 是否反向 最终状态
    3. }