元素 {
}
二、复合属性联动应用
轮播项 {
transition: transform 500ms;
三、事件触发的进阶玩法
鼠标悬停：:hover { opacity: 0.8; }
点击聚焦：:active { scale: 1.05; }
四、性能优化技巧
五、跨浏览器兼容方案
虽然Transition在主流浏览器中全面支持，但需注意：
IE9+支持基础过渡
某些属性在Android 4.0以下版本存在兼容性问题
推荐通过@supports查询语句实现渐进增强：
}
【常见问题解答】
Q1：如何实现点击后瞬间完成过渡
transition: opacity 0s;
opacity: 0;
元素:hover {
opacity: 1;
transition: opacity 300ms;
Q2：过渡动画是否影响SEO
Q3：如何检测过渡是否完成
transition: width 500ms;
元素.offsetWidth {
transition-end: width;
Q4：过渡动画如何避免卡顿
Q5：过渡动画与CSS动画的区别
Q6：如何调试过渡性能问题
Q7：过渡动画是否支持反向效果
元素:active {
transform: translateX(100%);
Q8：过渡动画如何与JavaScript交互