过渡（transition)是CSS3中具有颠覆性的特征之一，我们可以在不使用 Flash 动画或JavaScript 的情况下，当元素从一种样式变换为另一种样式时为元素添加效果- 过渡动画：是从一个状态渐渐的过渡到另外一个状态
- 过渡经常和：hover一起搭配使用
transition：要过度的属性 花费时间 运动曲线 何时开始；
- 要过渡的属性：想要变化的 CSS 属性，宽度高度，背景颜色，内外边距都可以，如果想要所有的属性都变化过渡，写一个all就可以。
- 花费时间：单位是秒(必须写单位) 比如0.5s
- 运动曲线：默认是ease(可以省略)
- 何时开始：单位是秒(必须写单位)，可以设置延迟触发事件，默认是0s(可以省略)
过渡的口诀：谁做过渡给谁加
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>过渡</title>
<style>
div{
width: 200px;
height: 300px;
background-color: red;
transition: width .5s ease .1s,height .5s ease .1s;
/* transition: all .5s ease .1s */
}
div:hover{
width: 400px;
height: 400px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
结果演示
检测过渡是否完成事件transitionend。
div.addEventListener('transitionend',function(){
console.log('滚动完成');
})
