大厂前端带来css3动画transition的使用和介绍全新认识动画

CSS3中可以使用transition来做最简单动画效果，transition表示到一个元素的属性值发生变化时，我们可以看到页面元素从旧的属性慢慢变化为新的属性值的过程，这种效果不是立即变化的，而是体现出一种动画过程。在transition出现之前css是没有过渡效果的（时间轴），也就是所有的属性的变化都是即时完成。

 

transition是由4个属性的合体简写：它们分别是：

ransition-property – 过渡的CSS属性的名称，例如：opacity。
transition-duration – 定义过渡效果花费的时间。默认值为 0。
transition-timing-function – 转变时使用的调速函数(比如, linear、 ease-in 或自定义的 cubic bezier 函数)。
transition-delay -过渡效果何时开始。默认是 0。

 

实例：

效果：鼠标移动到div上，停留2秒后宽度由100px经1秒的时间变化到200px

<style> 
div{
 width:100px;
 height:100px;
 background:yellow;
 transition-property:width 1s linear 2s;
 -moz-transition:width 1s linear 2s;/* Firefox 4 */
 -webkit-transition:width 1s linear 2s;/* Safari and Chrome */
 -o-transition:width 1s linear 2s;/* Opera */
}
div:hover{
   width:200px;
}
</style>

 

 

由于transition是4中属性的简写，因此也可以写为：

div
{
transition-property: width;
transition-duration: 1s;
transition-timing-function: linear;
transition-delay: 2s;
/* Firefox 4 */
-moz-transition-property:width;
-moz-transition-duration:1s;
-moz-transition-timing-function:linear;
-moz-transition-delay:2s;
/* Safari 和 Chrome */
-webkit-transition-property:width;
-webkit-transition-duration:1s;
-webkit-transition-timing-function:linear;
-webkit-transition-delay:2s;
/* Opera */
-o-transition-property:width;
-o-transition-duration:1s;
-o-transition-timing-function:linear;
-o-transition-delay:2s;
}

 

办公资源网址导航 https://www.wode007.com

transition的使用注意

1、目前，各大浏览器（包括IE 10）都已经支持无前缀的transition，所以transition已经可以很安全地不加浏览器前缀。

2、不是所有的CSS属性都支持transition，完整的列表查看这里，以及具体的效果。

3、transition需要明确知道，开始状态和结束状态的具体数值，才能计算出中间状态。比如，height从0px变化到100px，transition可以算出中间状态。但是，transition没法算出0px到auto的中间状态，也就是说，如果开始或结束的设置是height: auto，那么就不会产生动画效果。类似的情况还有，display: none到block，background: url(foo.jpg)到url(bar.jpg)等等。

 

transition的局限

1、transition需要事件触发，所以没法在网页加载时自动发生。

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

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

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

5、CSS Animation就是为了解决这些问题而提出的。