关注互联网应用及运维技术的个人博客

css3中常见的animation系列属性解释

animation动画的语法是:animation-name animation-duration animation-timing-function animation-delay animation-iteration-count animation-direction animation-fill-mode animation-play-state。简写为animation;

animation-name:指定本应用使用的动画系列,动画的名称是由关键帧@keyframes来命名的;

animation-duration:完成一个动画所需时间,也就是一个动画的周期时长,当该属性值为0的时候,那么元素没有动画;

animation-timing-function:定义一个动画周期内执行的节奏【快慢】,也可以理解为“加速度”,这个“加速度”是作用于整个关键帧的;

animation-delay:设置动画延迟,当元素加载渲染完成之后,延迟一段时间,动画才开始;

animation-iteration-count:设置动画重复的次数,属性值为infinite时,动画会无限循环;

animation-direction:设置动画完成之后,是反向执行还是重原点开始重复动画;

animation-fill-mode:设置动画在执行之前和之后,如何将样式应用在目标元素上;

animation-play-state:允许暂停动画和回复动画。

赞(0)
未经允许不得转载:飞天狒狒 » css3中常见的animation系列属性解释

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址