过渡效果通过transition属性实现，包括property、duration、timing-function和delay四个子属性，可简写为一行。常见触发方式有:hover、:focus、:active、JavaScript操作和@media查询。例如设置.button{transition:background-color 0.3s ease;}配合:hover可使背景色平滑变化。必须设置duration，否则过渡无效。
HTML和CSS中的过渡效果（Transition）能让元素的样式变化更平滑自然。实现过渡主要依赖transition相关属性，并通过状态改变来触发。
transition 格式属性
CSS transition 是一个复合属性，可拆分为以下几个子属性：
-
transition-property：指定要应用过渡效果的CSS属性，比如
width、opacity、background-color。设为 all 表示所有可动画属性都参与过渡。
transition-duration：定义过渡持续时间，单位为秒（s）或毫秒（ms）。例如 0.5s 表示半秒完成过渡。
transition-timing-function：设置过渡的速度曲线，常用值有 ease、linear、ease-in、ease-out、cubic-bezier() 等。
transition-delay：设定过渡开始前的延迟时间，如 0.2s 表示延迟0.2秒后才开始动画。
这些属性可以简写为一行：
transition: property duration timing-function delay;例如：
立即学习“前端免费学习笔记（深入）”；
.box {
transition: background-color 0.3s ease 0.1s;
}
过渡效果的触发方式
过渡不会自动播放，需要通过某种方式改变元素的样式状态来触发。常见方式包括：
-
:hover：鼠标悬停时触发。最常见用法，适合按钮、图片等交互元素。
:focus：元素获得焦点时触发，常用于输入框、可聚焦控件。
:active：元素被激活（如鼠标按下）时触发。
JavaScript 操作类名或内联样式：通过JS添加/移除class，或直接修改style属性，从而改变样式并触发过渡。
@media 媒体查询：在响应式设计中，屏幕尺寸变化导致样式变更，也可触发过渡（需注意浏览器支持）。
举例：
.button {
background-color: blue;
transition: background-color 0.3s ease;
}
.button:hover {
background-color: red;
}
当鼠标移到 .button 上时，背景色会以0.3秒的缓动效果从蓝色变为红色。
基本上就这些。合理使用 transition 属性，配合合适的触发条件，就能实现自然流畅的界面动画效果。不复杂但容易忽略细节，比如忘记设 duration 会导致过渡无效（默认为0）。
