过渡
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之后结果