CSS3过渡（transition）允许我们在两个不同的CSS样式之间创建一种过渡效果。通过使用transition属性，我们可以定义CSS属性如何从一个值转换为另一个值。这种变化可以在鼠标事件（如：:hover），按下按钮等场景下触发。
transition属性的基本用法
在CSS3中，transition属性用于指定如何从一个CSS样式过渡到另一个CSS样式。以下是一个基本的transition属性使用例子：
div{
width: 50px;
height: 50px;
background-color: red;
transition: width 2s;
}
div:hover{
width: 150px;
}
在上述代码中，当鼠标悬停在div元素上时，div元素的宽度将从50px转换为150px，并且该过渡效果会持续2秒钟。
transition属性的详细语法
transition属性的语法如下：
transition: [property] [duration] [timing-function] [delay];
其中：
[property]：过渡的CSS属性名，可以是单个属性或多个属性，用逗号分隔。
[duration]：指定过渡的持续时间，以秒（s）或毫秒（ms）为单位。
[timing-function]：指定过渡的时间函数，可以是 ease、linear、ease-in、ease-out、ease-in-out、cubic-bezier()。
[delay]：指定过渡开始执行之前的延迟时间，以秒（s）或毫秒（ms）为单位。
基于以上语法，我们可以通过transition属性来定义更多复杂的过渡效果。
transition属性的值
下面是transition属性的可选值和默认值：
[property]：CSS属性名称，如height、width、background-color等
[duration]：时间，如1s、3.5s、500ms等，默认值为0s
[timing-function]：时间函数，如linear、ease、ease-in、ease-out、ease-in-out、cubic-bezier，默认值为ease。
[delay]：时间，如1s、3.5s、500ms等，默认值为0s。
transition-timing-function属性
transition-timing-function属性用于指定过渡的时间函数。它决定CSS属性值如何由起始值平滑地过渡到结束值。常见的时间函数包括：
linear：等速缓动，即匀速运动
ease：默认值。缓慢开始，中间变化比较快，最后又慢下来
ease-in：缓慢开始
ease-out：缓慢结束
ease-in-out：缓慢开始和结束
cubic-bezier：自定义时间函数
transition-delay属性
transition-delay属性用于指定过渡效果的延迟时间。即过渡效果在触发之后等待多长时间开始执行。如果指定了delay值，则过渡效果将在触发之后延迟指定的时间后开始执行。
transition属性的例子
下面是transition属性的一些例子：
过渡原点
div{
width: 50px;
height: 50px;
background-color: red;
transition: width 2s;
transform-origin: top;
}
div:hover{
width: 150px;
transform: rotate(45deg);
}
在上述代码中，当鼠标悬停在div元素上时，div元素的宽度将从50px转换为150px，并且该过渡效果会持续2秒钟。同时，div元素围绕顶部旋转45度。
多个属性
div{
width: 50px;
height: 50px;
background-color: red;
transition: width 2s, height 2s, background-color 2s;
}
div:hover{
width: 150px;
height: 150px;
background-color: blue;
}
在上述代码中，当鼠标悬停在div元素上时，div元素的宽度、高度和背景色将同时变化，并且该过渡效果持续2秒钟。
自定义时间函数
div{
width: 50px;
height: 50px;
background-color: red;
transition: width 2s cubic-bezier(0.1, 0.7, 1.0, 0.1);
}
div:hover{
width: 150px;
}
在上述代码中，当鼠标悬停在div元素上时，div元素的宽度将从50px转换为150px，并且该过渡效果会持续2秒钟。同时，我们使用cubic-bezier()自定义了时间函数，使过渡效果更加个性化。
总结
CSS3过渡效果非常强大，可以通过transition属性定义各种复杂的过渡效果。通过掌握transition的相关知识，我们可以用更加丰富多彩的方式来设计Web页面中的动画效果。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
