CSS3 Transitions通过定义属性、时间、速度曲线和延迟实现网页元素的平滑过渡，如按钮悬停变色；可使用ease-in-out等timing function控制速度变化，与animation相比更适用于简单状态切换，复杂动画需用animation；还可通过JavaScript操作类名或样式触发过渡。
HTML5的过渡效果，简单来说，就是让你的网页元素在状态改变时，不再是“咔哒”一下的突变，而是平滑地过渡过去。这能让用户体验更上一层楼，感觉更流畅自然。
CSS3 Transitions过渡教程
想要给HTML5元素添加过渡效果，CSS3 Transitions是你的好帮手。它允许你指定哪些CSS属性在状态改变时进行过渡，以及过渡的速度、延迟和方式。
如何使用CSS3 Transitions实现平滑过渡？
首先，你需要明确哪些CSS属性需要在状态改变时进行过渡。比如，你可能想让一个按钮在鼠标悬停时，背景颜色平滑地改变。然后，使用
transition属性来定义过渡效果。
立即学习“前端免费学习笔记（深入）”；
transition属性可以接受多个值，分别指定要过渡的属性、过渡的持续时间、过渡的函数（timing function）以及过渡的延迟时间。例如：
.button {
background-color: #3498db; /* 初始背景颜色 */
transition: background-color 0.3s ease-in-out; /* 背景颜色过渡，持续0.3秒，缓入缓出效果 */
}
.button:hover {
background-color: #e74c3c; /* 鼠标悬停时的背景颜色 */
}这段代码表示，当鼠标悬停在
.button元素上时，其背景颜色会从
#3498db平滑过渡到
#e74c3c，过渡时间为0.3秒，使用缓入缓出效果。
你也可以一次性指定多个属性的过渡效果：
.box {
width: 100px;
height: 100px;
background-color: #f39c12;
transition: width 0.5s ease, height 0.5s ease, background-color 0.5s ease;
}
.box:hover {
width: 200px;
height: 200px;
background-color: #2ecc71;
}这段代码会让
.box元素在鼠标悬停时，宽度、高度和背景颜色都平滑地改变。
Transition timing function有哪些？怎么选择合适的？
transition-timing-function定义了过渡效果的速度曲线。它决定了过渡在整个持续时间内是如何变化的。常见的timing function包括：
linear
: 匀速过渡，速度恒定。ease
: 默认值，先加速后减速，比较自然。ease-in
: 加速过渡，开始慢，结束快。ease-out
: 减速过渡，开始快，结束慢。ease-in-out
: 先加速后减速，开始和结束都比较慢。cubic-bezier(n,n,n,n)
: 自定义贝塞尔曲线，可以实现更复杂的过渡效果。
选择合适的timing function取决于你想要什么样的视觉效果。
ease和
ease-in-out通常用于需要平滑过渡的场景，而
linear则适用于需要匀速运动的场景。对于更精细的控制，可以使用
cubic-bezier自定义速度曲线。
例如，一个从左到右移动的元素，使用
linear会让它看起来比较机械，而使用
ease-in-out会让它看起来更自然。
transition和animation的区别是什么？什么时候用哪个？
虽然
transition和
animation都可以创建动画效果，但它们的使用场景和功能有所不同。
-
Transition: 用于在CSS属性值发生变化时，创建一个平滑的过渡效果。它通常是响应用户交互（如鼠标悬停）或JavaScript触发的。
transition
是单次的、简单的状态改变。 -
Animation: 用于创建更复杂的、可重复的动画序列。它可以通过
@keyframes
规则定义动画的关键帧，并控制动画的播放次数、方向等。animation
可以独立于用户交互运行，可以创建更丰富的视觉效果。
简单来说，如果你的动画只是简单的状态改变，比如颜色、大小的过渡，那么
transition就足够了。但如果你需要创建复杂的动画序列，或者需要控制动画的播放行为，那么
animation更适合。
举个例子，一个按钮的背景颜色在鼠标悬停时改变，可以使用
transition。而一个不停旋转的加载动画，则应该使用
animation。
如何用JavaScript控制CSS Transitions？
虽然CSS Transitions主要通过CSS定义，但你也可以使用JavaScript来控制它们。这在需要根据特定条件触发过渡效果时非常有用。
你可以通过JavaScript来修改元素的CSS类名，或者直接修改元素的CSS属性。例如：
const element = document.getElementById('myElement');
function startTransition() {
element.classList.add('active'); // 添加一个包含过渡效果的类
// 或者
// element.style.width = '200px'; // 直接修改CSS属性
}
function endTransition() {
element.classList.remove('active'); // 移除类
// 或者
// element.style.width = '100px';
}
// 监听事件，触发过渡
element.addEventListener('click', startTransition);在这个例子中，点击
myElement元素会触发
startTransition函数，该函数会添加一个名为
active的CSS类，这个类包含了过渡效果的定义。你也可以直接使用
element.style来修改CSS属性，但通常使用类名更方便管理和维护。
需要注意的是，为了让过渡效果生效，你需要确保在修改CSS属性之前，元素已经存在于DOM中，并且已经应用了初始的CSS样式。
