css中的transition属性

css中的transition属性

定义

过渡transition是一个复合属性，包括transition-property、transition-duration、transition-timing-function、transition-delay这四个子属性。通过这四个子属性的配合来完成一个完整的过渡效果。

1.transitions提供了一种在更改CSS属性时控制动画速度的方法。 其可以让属性变化成为一个持续一段时间的过程，而不是立即生效的。

2.CSS transitions 可以决定哪些属性发生动画效果 (明确地列出这些属性)，何时开始 (设置 delay），持续多久 (设置 duration) 以及如何动画 (定义timing funtion，比如匀速地或先快后慢)。

例如
把鼠标指针放到 div 元素上，其宽度会从 100px 逐渐变为 300px：
div
{
width:100px;
transition: width 2s;
-moz-transition: width 2s;
-webkit-transition: width 2s;
-o-transition: width 2s;
}

复合属性

过渡transition的这四个子属性只有是必需值且不能为0。其中，和都是时间。当两个时间同时出现时，第一个是，第二个是；当只有一个时间时，它是，而为默认值0。

过渡属性

transition-property
值: none | all | transition-property[,transition-pro