HTML5响应式网页设计——页面特效——动画

动画：
使用@keyframes规则创建一个动画

@keyframes 关键帧名{
     from{
     起始样式属性值
     }
     to{
     结束样式属性值
     }
}

或

@keyframes 关键帧名{
      0%{
      样式属性值
      }
      ……
      50%{
      样式属性值
      }
      ……
      100%{
      样式属性值
      }
}

动画属性：

属性	说明
animation-delay	指定动画开始之前的延迟时间
animation-direction	指定动画循环播放的时间和是否反向播放过渡的持续时间，取值normal或alternate（反向播放）
animation-duration	指定动画播放的持续时间
animation-iteration-count	指定动画播放的次数，取值infinite（循环）或数值
animation-name	指定动画名称
animation-play-state	允许动画暂停和重新播放，取值running或paused
animation-timing-function	指定动画期间计算中间值的方式。确定动画播放速度的变化
animation	动画属性简写