缓动 css,CSS3使用过度动画和缓动效果案例讲解

transition过渡：

四个小属性

属性

意义

transition-property

哪些属性要过渡

transition-duration

动画时间

transition-timing-function

动画变化曲线(缓动效果)

transition-delay

延迟时间

transition过度属性是CSS3浓墨重彩的特性，过度可以为一个元素在不同样式之间变化自动添加“补间动画”

兼容性IE10开始兼容，移动端兼容良好

曾几何时，网页上的动画特效基本都是由JavaScript定时器实现的，现在逐步改为使用CSS3过度

优点：动画更细腻，内存开销小

transition属性有4个要素：

transition：width 1s linear 0s;(什么属性要过度、动画时长、变化速度曲线、延迟时间)

动画过渡

.box {

width: 200px;

height: 200px;

background-color: black;

transition: width 5s linear 0s;

}

.box:hover {

width: 500px;

}