transition过渡和animation动画

transition 强调过渡  是两个关键帧的animation

animation 强调流程与控制 是多个关键帧的animation

一、transition

属性	描述
transition-property	指定要过渡的css属性
teansition-duration	指定完成过渡要花费的时间
transition-timing-function	指定过渡函数
transition-delay	指定过渡开始出现的延迟时间

属性可以分开写，也可放在一起写，如：

img{height:15px;width:15px;transition:1s 1s height ease;}

或者：

img{width:15px;height:15px;transition-property:height;transition-duration:1s;transition-delay:1s;transition-timing-function:ease;}

img:hover{width:45px;height:45px;}

因为过渡所需时间与过渡延迟时间都是秒，所以第一个time会解析为transition-duration，第二个解析为transition-delay

速记发：transition:过渡属性 过渡所需时间  过渡动画函数  过渡延迟时间

属性详解

transition-property：不是所有的属性都能过渡，只有属性具有一个中间点值才具备过渡效果，见列表 ，具体效果，见页面

transition-duration：指定从一个属性到另一个属性过渡要花费的时间，默认为0，为0时表示变换时瞬时的，但不到过渡效果。

transition-timing-function：过渡函数有如下几种：

　　liner：匀速

　　ease-in：减速

　　ease-out：加速

　　ease-in-out：先加速后减速

　　cubic-bezier：三次贝塞尔曲线  见这里

触发过渡  

单纯的代码不会触发任何过渡操作，需要通过用户的行为（如点击、悬浮等）触发，可触发的方式有：

:hover  :focus :checked 媒体查询触发 js触发

局限性

有点在于简单易用，但是也有几个很大的局限

（1）transition需要时间触发，不能再网页加载时自动触发

（2）transition是一次性的，不能重复发生，除非再触发

（3）transition只能定义开始状态和结束状态，不能定义中间状态，也就是说只有两个状态

（4）一条transition规则，只能定义一个属性的变化，不能涉及多个属性

animation就是为了解决这些问题而提出的

二、animation

css3的animation属性可以像flash一样通过控制关键帧来控制动画的每一步，实现更复杂的动画效果，由2部分组成：

（1）通过类似flash动画中的帧来声明一个动画

（2）在animation属性中调用关键帧声明的动画

注：需要添加浏览器前缀

animation动画属性

属性	描述
animation-name	用来指定关键帧动画的名字  :none为默认值，将无动画，其可以用来覆盖任何动画
animation-duration	用来指定动画不放所需时间
animation-timing-function	设置动画的播放方式
animation-delay	指定动画开始时间
animation-iteration-count	指定动画不放的循环次数  默认为1，infinite为无限次循环播放
animation-direction	控制动画的播放方向  默认为normal，每次循环都是向前播放（0-100），alternate，动画播放为偶数次则向前播放，为基数则反方向播放
animation-play-state	设置动画的播放状态，播放还是暂停  默认为running播放，pause的暂停
animation-fill-mode	设置动画的时间外属性，即定义动画开始之前和之后发生的操作，默认为none，动画结束时回到动画没开始时的状态；forwards动画结束后继续应用最后关键帧的位置，即保存在结束状态；backwards让动画回到第一帧的状态；both轮流应用forwards额backwards规则。

@keyframes

css3的animation制作动画效果主要包括两部分：

 

（1）用关键帧来声明一个动画

（2）在animation调用关键帧声明的动画

@keyframes就是关键帧，这个针与flash里的帧类似，一个动画中科院有很多个帧

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

 

div:hover {
  -webkit-animation: 1s changeColor;
  animation: 1s changeColor;  
}

@-webkit-keyframes changeColor {
  0% { background: #c00; }
  50% { background: orange; }
  100% { background: yellowgreen; }
}
@keyframes changeColor {
  0% { background: #c00; }
  50% { background: orange; }
  100% { background: yellowgreen; }
}

代码中0% 100%的百分号都不能省略，0%可以由form代替，100%可以由to代替，让动画有效就必须要通过css3的animation属性来调用它。

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

 转自:http://blog.csdn.net/XIAOZHUXMEN/article/details/52003135