如何在现有CSS div动画中添加文本阴影动画以模拟文本重量？

嘿，我懂你想要的效果——给文本阴影加动画，让文字在配合现有缩放淡入的过程中，呈现出「重量感」，就像文字从轻盈状态慢慢“沉”下来一样，对吧？

先看你现有的代码，已经通过fadeAndScale动画处理了元素的透明度和缩放，只需要在这个动画里补全text-shadow的过渡逻辑就行。核心思路是：让阴影从模糊、淡色、无偏移的轻盈状态，过渡到清晰、深色、带垂直偏移的厚重状态，用阴影的形态变化模拟文字“增重”的视觉感受。

下面是补全后的完整代码：

div#main { 
  background-color: #2E2E2E; 
}
div#lblCaption { 
  margin-bottom: 0px; 
  color: #C7C7C7;
}
div#NodeCaptionContainer{ 
  animation-duration: .7s; 
  animation-name: fadeAndScale; 
  animation-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1); 
  /* 确保动画结束后保留最终的重量感样式 */
  animation-fill-mode: forwards;
}
@keyframes fadeAndScale { 
  from { 
    opacity: 0; 
    transform: scale(.9, .9); 
    /* 初始状态：模糊淡阴影，模拟轻盈感 */
    text-shadow: 0 0 10px rgba(0, 0, 0, 0.15); 
  }
  to { 
    opacity: 1; 
    transform: scale(1, 1); 
    /* 最终状态：带垂直偏移的实阴影，模拟重量感 */
    text-shadow: 0 3px 6px rgba(0, 0, 0, 0.5); 
  }
}

关键细节说明： #

• animation-fill-mode: forwards：这个属性能让动画结束后，元素保持to状态的样式，不会跳回初始值，确保阴影的重量感一直保留。
• 阴影参数调整：如果想要更强的重量感，可以增加垂直偏移量（比如把0 3px改成0 5px），或者加深阴影的透明度（把0.5改成0.7）；反之，想要更轻盈的效果，就减小偏移和透明度。
• 配合动画曲线：你用的cubic-bezier(0.22, 0.61, 0.36, 1)曲线本身带有“先快后慢”的过渡感，和阴影的重量变化非常契合，能让整个动画更自然。

如果需要针对#lblCaption单独做文本阴影动画（毕竟它是容器里的文本元素），也可以把动画直接应用到这个div上，效果会更精准哦！

内容的提问来源于stack exchange，提问作者Code Pope