CSS中tansition与animation区别

tansition

产生一种过度效果,需要事件发生,

transition 属性是一个简写属性(transiton: 过渡属性 过渡所需要时间 过渡动画函数 过渡延迟时间),用于设置四个过渡属性:

  • transition-property 过度属性,可以是单个属性,也可以是多个属性(all)一起
  • transition-duration 过度总花时间
  • transition-timing-function  过度的效果
  • transition-delay  过度延迟事件

缺点:

  1. 需要事件触发
  2. 一次性不能重复,除非在此触发事件
  3. 只有开始和结束状态,不能定义中间状态。

由此产生了animation

animation

通过控制关键帧来控制动画的每一步,实现更为复杂的动画效果。ainimation实现动画效果主要由两部分组成:

  1. 用帧来声明一个动画
  2. animation属性中调用关键帧声明的动画

 

animation 属性是一个简写属性,用于设置六个动画属性:

  • animation-name 规定需要绑定到选择器的 keyframe 名称
  • animation-duration
  • animation-timing-function 设置播放的方式
  • animation-delay
  • animation-iteration-count 动画播放的次数
  • animation-direction  动画的方向
  • animation-play-state 设置播放的状态,是播放还是暂停
  • animation-fill-mode设置动画外的属性

帧测声明:

@keyframe就是关键帧。这个帧与Flash里的帧类似,一个动画中可以有很多个帧。

一个@keyframes中的样式规则是由多个百分比构成的,可以在这个规则上创建多个百分比,从而达到一种不断变化的效果。另外,在兼容Google时,@keyframes必须要加webkit前缀

@keyframes changeColor {
 0%{do something ...}
 50%{do something ...}
 100%{do something ...}
}
@-webkit-keyframes changeColor{
 0%{do something ...}
 50%{do something ...}
 100%{do something ...}
}

上面代码中的0% 100%的百分号都不能省略,0%可以由from代替,100%可以由to代替。要让changeColor动画有效果,就必须要通过CSS3animation属性来调用它。

区别

animation属性类似于transition,他们都是随着时间改变元素的属性值,其主要区别在于:transition需要触发一个事件才会随着时间改变其CSS属性;animation在不需要触发任何事件的情况下,也可以显式的随时间变化来改变元素CSS属性,达到一种动画的效果。

 

本文参考与:http://www.mamicode.com/info-detail-1742822.html

0 条评论
发表一条评论