transition代替简单的animation注意事项

一、

  transition 和 animation  不支持    Internet Explorer 9,以及更早的版本。

二、

 要变化的属性 
transition-property:要变化的属性,比如元素变宽则是width,文字颜色要变色这是color;W3C给出了一个可变换属性的列表: 
CSS属性 改变的对象 
background-color 色彩 (  渐变色在background不是属于background-color,而是属于background-image。对于background-image要有过                                                  渡效果,你得通过background-position的变化来实现。)
background-image 只是渐变 
background-position 百分比,长度 
border-bottom-color 色彩 
border-bottom-width 长度 
border-color 色彩 
border-left-color 色彩 
border-left-width 长度 
border-right-color 色彩 
border-right-width 长度 
border-spacing 长度 
border-top-color 色彩 
border-top-width 长度 
border-width 长度 
bottom 百分比,长度 
color 色彩 
crop 百分比 
font-size 百分比,长度 
font-weight 数字 
grid-* 数量 
height 百分比,长度 
left 百分比,长度 
letter-spacing 长度 
line-height 百分比,长度,数字 
margin-bottom 长度 
margin-left 长度 
margin-right 长度 
margin-top 长度 
max-height 百分比,长度 
max-width 百分比,长度 
min-height 百分比,长度 
min-width 百分比,长度 
opacity 数字 
outline-color 色彩 
outline-offset 整数 
outline-width 长度 
padding-bottom 长度 
padding-left 长度 
padding-right 长度 
padding-top 长度 
right 百分比,长度 
text-indent 百分比,长度 
text-shadow 阴影 
top 百分比,长度 
vertical-align 百分比,长度,关键词 
visibility 可见性 
width 百分比,长度 
word-spacing 百分比,长度 
z-index 正整数 
zoom 数字 
该取值还有个强大的“all”取值,表示上表所有属性; 
除了以上属性外,当然还有css3中大放异彩的css3变形,比如放大缩小,旋转斜切,渐变等等。

三、

transition:[ transition-property ] || [ transition-duration ] || [ transition-timing-function ] || [ transition-delay ]

四、

transition-timing-function :cubic-bezier:特定的cubic-bezier曲线。 (x1, y1, x2, y2)四个值特定于曲线上点P1和点P2。所有值需在[0, 1]区域内,否则无效。

五、

改变两个或者多个css属性的transition效果,那么我们只要把几个transition的声明串在一起,用逗号(“,”)隔开,然后各自可以有各自不同的延续时    间和其时间的速率变换方式。

  a {
-moz-transition: background 0.5s ease-in,color 0.3s ease-out;
-webkit-transition: background 0.5s ease-in,color 0.3s ease-out;
-o-transition: background 0.5s ease-in,color 0.3s ease-out;
transition: background 0.5s ease-in,color 0.3s ease-out;
}

六、

  animation可以不与事件结合,在dom加载完后直接执行,transition不能这样写(transition这样相当于重写)

上一篇:点滴积累【other】---Windows 7 IIS (HTTP Error 500.21 - Internal Server Error)解决方案(转载)


下一篇:http协议基础(二)请求和响应报文的构成