CSS3 animation关键帧运动

一.animation关键帧运动

  1. 设置运动规则及运动属性,并把运动规则的名称指定给相应元素
  • animation-duration
  • animation-timing-function
  • animation-delay
  • animation-iteration-count
设置运动相关属性:名称,时间,状态,延迟,次数
  1. 设置运动关键帧:百分比指运动时间百分比
  1. 集成写法
animation:hd 2s linear 1s infinite;

运动名称 运动时间 运动状态 运动延迟 运动形式(次数)

二.旋转基准点设置

  • transform-origin: 距离左侧xx像素 距离上侧xx像素
    以此为基准点

三.轮流反向运动

四.运动填充

  1. animation-fill-rode:forwards; 运动完毕之后,保持最后一帧的状态
    (也可写在集成animation属性里面)
  2. animation-fill-rode:backwards; 在延迟期间元素会保持运动的初始状态

五.动画的暂停

animation-play-state:paused;

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容