CSS - 动画，动画的定义，动画全部属性

1.动画的定义

  <style>
    /*只定义起始与结束*/
    @keyframes 动画名称1 {
        from { }
        to { }
    }
    /*用百分比定义动画*/
    @keyframes 动画名称2 {
        0% { }
        10% { }
        100% { }
    }
  </style>

 

2.使用动画

/*动画名称  持续5秒 无限重复或定义次数(2)*/
animation: 动画名称 5s infinite;

 

属性	描述
@keyframes	规定动画模式。
animation	设置所有动画属性的简写属性。
animation-delay	规定动画开始的延迟。
animation-direction	定动画是向前播放、向后播放还是交替播放。
animation-duration	规定动画完成一个周期应花费的时间。
animation-fill-mode	规定元素在不播放动画时的样式（在开始前、结束后，或两者同时）。
animation-iteration-count	规定动画应播放的次数。
animation-name	规定 @keyframes 动画的名称。
animation-play-state	规定动画是运行还是暂停。
animation-timing-function	规定动画的速度曲线。