本文深入探讨CSS动画中animation-delay与transition属性的区别与应用。许多开发者误以为animation-delay能实现动画的平滑渐入或渐出，但它仅用于延迟动画的启动。我们将揭示如何结合使用animation-delay来延迟动画开始，以及利用transition属性实现悬停（hover）时动画的平滑渐入与渐出效果，避免元素瞬间出现或消失，并对比box-shadow与hue-rotate动画的实现差异。

在CSS动画开发中，我们经常会遇到需要元素在悬停（hover）时延迟出现动画，并在移出悬停区域时平滑消失的需求。然而，很多开发者会混淆animation-delay和transition这两个属性的作用，导致动画效果不尽如人意，例如元素瞬间消失。本文将详细解析这两个属性的工作原理，并通过实例演示如何正确实现带有延迟和平滑过渡的悬停动画。

1. animation-delay 的工作原理：仅延迟动画启动

animation-delay属性用于指定动画在开始执行前的等待时间。这意味着，如果一个动画被触发（例如通过:hover伪类），它会在animation-delay指定的时间后才真正开始播放。

核心特性：

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

立即学习“前端免费学习笔记（深入）”；

• 延迟启动： 它只影响动画的开始时间，不影响动画过程中的帧间过渡，也不会在动画结束时提供平滑的退出效果。
• 瞬间变化： 当动画开始时，其属性值会立即从初始状态跳变到@keyframes定义的0%状态（或动画的第一个关键帧）。当动画停止时（例如:hover状态移除），元素的属性会瞬间恢复到非动画状态，不会有任何过渡效果。

考虑以下示例，当鼠标悬停在#letter元素上时，其内部的h1元素会应用一个glow动画，并带有500毫秒的animation-delay：

#letter:hover h1 {
  animation: glow 10s infinite alternate;
  animation-delay: 500ms; /* 动画将在悬停500毫秒后开始 */
}

在这个例子中