CSS过渡

过渡

CSS3 过渡是元素从一种样式逐渐改变为另一种的效果。

语法规则

选择器{   

 transition:property duration timing-function delay

}

tansition属性实现简单的动画效果 transition属性是一个复合属性，主要包含property、duration、timing-function、delay等子属性。

property:规定应用过渡的CSS属性名称。

取值none：没有属性会获得过渡效果。all：默认值，所有属性获得过渡值。

duration:定义过渡所需花费的时间。

取值time：以秒或毫秒计，默认是0，意味没有任何效果。

timing-function：规定过渡效果的时间曲线。

取值linear:规定以相同速度开始至结束的过渡效果

ease：规定慢速开始，然后变快，然后慢速结束的过渡效果

ease-in：规定以慢速开始的过渡效果

ease-out：规定以慢速结束的过渡效果

ease-in-out：规定以慢速开始和结束的过渡效果

cubic-bezier(n,n,n,n)：在 cubic-bezier 函数中定义自己的值

delay：规定开始之前需要等待的时间

取值： time值：以秒或毫秒计，默认是0

代码实现：

 这是过渡的初始状态，当鼠标指到box1之后结果