1.单属性过渡：通过transition指定单一属性和时间实现平滑变化；2.多属性同时过渡：用逗号分隔多个属性，实现复杂交互效果；3.过渡延迟：使用transition-delay设置等待时间以控制动画节奏；4.缓动函数：通过transition-timing-function定义速度曲线，如linear、ease-in-out或cubic-bezier自定义曲线；5.all属性过渡：便捷地过渡所有属性但需注意性能问题；6.transform结合：利用transform属性触发硬件加速提升动画性能；7.max-height技巧：通过过渡max-height实现内容展开/收起效果。
HTML动画效果，纯CSS主要靠transition属性。它让元素在不同状态间平滑过渡，比如鼠标悬停、焦点变化时，属性值能从一个状态缓慢变到另一个状态，而不是瞬间跳变。这七种用法其实是transition属性的不同组合和应用场景，核心在于控制变化的速度、时间、以及何时开始。
解决方案
1. 最基础的单属性过渡这是最直接的用法，指定一个属性和过渡时间。
.box { width: 100px; height: 100px; background-color: lightblue; transition: background-color 0.3s ease-in-out; /* 仅背景色在0.3秒内平滑变化 */}.box:hover { background-color: salmon; /* 鼠标悬停时背景色变化 */}
当你只需要一个属性动起来，这是最简洁明了的方式。
2. 多属性同时过渡如果需要多个属性同时过渡，可以逗号分隔。
.button { padding: 10px 20px; background-color: #007bff; color: white; border-radius: 5px; transition: background-color 0.3s ease, transform 0.3s ease; /* 背景色和变形同时过渡 */}.button:hover { background-color: #0056b3; transform: translateY(-3px); /* 悬停时背景色变深并向上轻微移动 */}
这样可以实现更复杂的交互效果，比如一个按钮在悬停时颜色和位置都发生变化。
立即学习“前端免费学习笔记（深入）”；
3. 过渡延迟 (Transition Delay)transition-delay 允许你在过渡开始前等待一段时间。
.card { width: 150px; height: 150px; background-color: #f0f0f0; margin: 10px; transition: opacity 0.5s ease-out 0.2s; /* 0.2秒后才开始透明度过渡 */ opacity: 1;}.card:hover { opacity: 0.7; /* 鼠标移开时，如果想让它立刻恢复，可以只在 :hover 上设置延迟，或者在 .card 上设置不同的延迟 */}
这个在需要序列化动画或者给用户一点反应时间时很有用。比如，鼠标悬停在一个元素上，它不是立刻变化，而是稍等片刻才动，给人一种“确认”的感觉。
4. 缓动函数 (Timing Functions) 的魔力transition-timing-function 决定了过渡的速度曲线。这是动画效果是否“自然”的关键。
.shape { width: 50px; height: 50px; background-color: purple; margin-bottom: 10px; transition: width 1s; /* 默认是 ease */}.shape.linear { transition-timing-function: linear; } /* 匀速 */.shape.ease-in { transition-timing-function: ease-in; } /* 慢速开始，加速 */.shape.ease-out { transition-timing-function: ease-out; } /* 快速开始，减速 */.shape.ease-in-out { transition-timing-function: ease-in-out; } /* 慢速开始，加速，慢速结束 */.shape.bounce { transition-timing-function: cubic-bezier(0.68, -0.55, 0.27, 1.55); } /* 弹性效果 *//* 还有 steps() 函数，可以实现分步动画，比如打字机效果 */.shape:hover { width: 200px;}
cubic-bezier 是个宝藏，它让你能“雕刻”出任何你想要的加速曲线，从弹跳到回弹，甚至像物理世界里的阻尼效果。在线的 cubic-bezier 生成器能帮你直观地调整。
5. all 属性的便捷性与潜在陷阱transition: all 会让所有可动画的属性都进行过渡。
.menu-item { padding: 10px; background-color: #eee; transition: all 0.4s ease; /* 所有属性都过渡 */}.menu-item:hover { background-color: #ddd; color: #333; transform: translateX(5px); box-shadow: 2px 2px 5px rgba(0,0,0,0.2);}
用 all 很方便，但要小心，如果元素有很多属性，或者在一些老旧设备上，过渡所有属性可能会带来性能问题，尤其是一些耗费资源的属性如 box-shadow 或 filter。通常，我更倾向于明确指定需要过渡的属性，这样更可控。
6. 与 transform 属性的结合transform 属性（scale, rotate, translate, skew）是CSS动画的性能之王，因为它通常能触发GPU硬件加速。
.icon { width: 50px; height: 50px; background-color: gold; border-radius: 50%; transition: transform 0.3s ease-out;}.icon:active { transform: scale(0.9) rotate(10deg); /* 点击时缩小并旋转 */}
这种组合在制作按钮点击反馈、图片放大、元素翻转等效果时非常常见且高效。
7. 利用 max-height 或 max-width 实现内容展开/收起对于内容动态展开或收起，直接过渡 height: auto 是无效的。一个常见的技巧是过渡一个足够大的 max-height 或 max-width。
.accordion-content { max-height: 0; /* 初始隐藏 */ overflow: hidden; /* 隐藏超出部分 */ transition: max-height 0.5s ease-in-out; /* 过渡最大高度 */ background-color: #f9f9f9; padding: 0 15px; /* 初始无内边距 */}.accordion-title.active + .accordion-content { max-height: 200px; /* 展开时给一个足够大的值 */ padding: 15px; /* 展开时显示内边距 */}
这个方法虽然有点“hacky”，但非常实用，能平滑地显示或隐藏可变高度的内容块，比如手风琴菜单。
CSS transition 和 animation 有什么区别？我该怎么选？
这个问题经常被问到，也是初学者容易混淆的地方。简单来说，transition 就像是元素从一个状态到另一个状态的“平滑过渡”，它需要一个明确的“触发器”，比如鼠标悬停、焦点选中，或者通过JavaScript动态添加/移除一个CSS类。它通常是单向或响应式的，从A到B，或者从B回到A。你无法直接定义一个复杂的动画序列，也无法让它自动循环播放。
而 animation 则更像是一个独立的“电影片段”，它通过 @keyframes 规则定义了一系列关键帧，你可以精确控制动画在不同时间点（比如0%、50%、100%）的状态。animation 可以独立运行，不需要外部触发，可以设置循环次数（无限循环）、延迟、播放方向（正向、反向、交替）、填充模式等。它能实现更复杂、更自由的动画效果，比如加载动画、引导动画、或者一个元素在页面上持续跳动。
怎么选呢？如果你只是想让一个按钮在鼠标悬停时平滑变色、或者一个图片在点击时稍微放大一下，那么 transition 是更简洁、更高效的选择。它代码量少，语义也更明确。但如果你需要一个元素自动循环旋转、或者想实现一个多步骤的、有时间轴控制的复杂动画，比如一个图标从左侧飞入、然后弹跳几次、最后静止，那毫无疑问应该选择 animation。我的经验是，对于大多数UI交互反馈，transition 足够了；但如果涉及品牌展示、用户引导或者需要脱离用户操作而自行播放的动画，animation 才是真正的利器。
使用 CSS transition 时，有哪些常见的坑或者需要注意的问题？
即便 transition 看起来简单，但在实际项目中还是会遇到一些“小麻烦”。
首先，不是所有CSS属性都能平滑过渡。最典型的就是 display 属性，你不能从 display: none 过渡到 display: block。因为 none 到 block 是一个瞬间的、离散的变化，没有中间状态可言。同理，height: auto 也无法直接过渡，因为它不是一个固定的数值。这就是为什么我们前面提到了用 max-height 来模拟展开收起效果。遇到这种非数值或离散属性，你需要换个思路，比如过渡 opacity 和 visibility 来模拟显示隐藏，或者像 max-height 那样利用一个足够大的固定值。
其次，性能问题不容忽视。虽然现代浏览器对CSS动画做了很多优化，但如果同时过渡大量元素，或者过渡一些计算量大的属性（如 box-shadow、filter、border-radius 的复杂值），仍然可能导致页面卡顿。尤其是在移动设备上，这种性能瓶颈会更明显。所以，尽量选择 transform 和 opacity 进行动画，它们通常能触发GPU硬件加速，动画效果会更流畅。
再者，层叠上下文 (z-index) 的意外行为。有时候，一个元素在过渡过程中，可能会因为 transform 属性的改变而创建新的层叠上下文，导致它突然“跳到”其他元素之上或之下，这往往不是你想要的效果。这需要你对CSS的层叠规则有一定了解，或者通过调整 z-index 来预先处理。
最后，过渡的“回弹”问题。当你鼠标快速移入移出时，如果过渡时间设置不当，可能会出现动画还没播放完就被打断，或者来回“抽搐”的现象。这需要根据实际情况调整 transition-duration 和 transition-timing-function，确保动画能平滑地完成，或者在快速操作时也能有合理的反馈。
如何让我的 CSS 过渡效果看起来更流畅、更自然？
让CSS过渡效果看起来“高级”和“自然”，不仅仅是设置一个时间那么简单，它更像是一门艺术，需要一些技巧和经验。
一个核心点是选择合适的缓动函数。我个人很喜欢 ease-out 用于元素进入视野或响应用户操作的动画，它开始时快，然后逐渐减速，给人一种“到位”的柔和感。而 ease-in 则常用于元素离开的动画，开始慢，然后加速消失。如果你想要更精细的控制，cubic-bezier 是你的最佳选择，它可以模拟出各种物理效果，比如弹性、回弹。花点时间去调整 cubic-bezier 的曲线，你会发现动画的质感会截然不同。
时长也很关键。一个太短的动画会让人觉得生硬、突兀，而一个太长的动画则会让用户感到等待。通常，0.2秒到0.5秒是比较安全的范围，它既能展现动画效果，又不会让用户觉得慢。当然，这要根据具体的动画类型和用户体验目标来定。比如，一个微小的颜色变化可能只需要0.1秒，而一个复杂的侧滑菜单展开则可能需要0.4秒。
利用硬件加速的属性。前面提到过，transform 和 opacity 是首选。它们在现代浏览器中通常能直接在GPU上渲染，大大减少了CPU的负担，从而提供更流畅的动画。尽量避免对 width、height、margin、padding 等会引起页面重排（reflow）的属性进行大量或频繁的动画，这些操作会消耗更多资源。
考虑用户体验的连贯性。一个好的动画不应该分散用户的注意力，而应该引导用户、增强反馈。例如，当一个元素从屏幕外滑入时，使用 ease-out 让它平稳地停下，而不是突然刹车。当鼠标悬停时，动画应该迅速响应，让用户感觉操作是即时的。
最后，可以尝试使用 will-change 属性。这是一个优化属性，你可以提前告诉浏览器，某个元素的某个属性将会在未来发生变化。这样浏览器就可以提前进行一些优化，比如为该元素分配独立的渲染层，从而提高动画的流畅性。但要注意，will-change 不应滥用，因为它本身也会消耗资源，只在确实需要优化的关键动画元素上使用。
以上就是HTML动画效果怎么做？纯CSS的7种transition用法的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1568687.html
微信扫一扫 
支付宝扫一扫 
