移动端 CSS 动画延迟为何导致动画范围被自动填满
当设置负值延迟时，动画会立即开始并从中间位置播放，导致动画范围被自动填满的现象。
负值延迟导致动画立即从中间开始
CSS 动画的 delay 属性用于控制动画开始前的等待时间。当指定正数延迟时，动画会在元素应用样式后等待指定时长才开始播放。如果设置 0s 或省略该属性，动画会立即从起始状态开始。当使用负值延迟时，动画会立即开始播放，但会从动画周期的中间位置开始执行。例如设置 -1s 的延迟，动画会立即开始，但会跳过前 1 秒的内容，直接从第 1 秒的位置开始播放。这种机制导致动画看起来像是被自动填满了整个周期。
MDN 文档明确指出，负值延迟会导致动画立即开始，但会从动画序列的中间位置开始。这意味着动画不会从 0% 开始，而是从负延迟对应的百分比位置开始。例如，如果动画总时长为 3 秒，设置 -1s 的延迟，动画会从 33% 的位置开始播放。这种特性在需要快速展示动画效果或实现特定视觉过渡时很有用，但也容易导致动画范围被自动填满的问题。
检查动画延迟的设置与动画时长
要排查动画范围被自动填满的问题，首先需要检查 animation-delay 的具体设置。在移动端开发中，可以通过开发者工具或浏览器控制台查看元素的 computed style。确认 delay 属性的值是否为负数，以及该值是否超过了动画的总时长。如果 delay 值为 -1s，而动画总时长为 2s，那么动画会从 50% 的位置开始播放，导致动画范围被自动填满。
另一个需要检查的方面是动画的 keyframes 定义。确保 keyframes 的起始和结束状态定义清晰，并且动画的 duration 属性设置正确。如果动画时长过短，而负延迟值较大，会导致动画几乎瞬间完成，看起来像是被自动填满了整个范围。通过调整 delay 值或动画时长，可以控制动画的起始位置和播放范围。
验证动画播放范围与起始位置
验证动画播放范围最直接的方法是观察动画的实际播放效果。在移动端设备或模拟器上运行页面，检查动画是否从预期的位置开始播放。如果动画立即从中间位置开始，并且播放速度正常，那么可以确认是负值延迟导致的。可以通过添加 console.log 或监听 animationstart 事件来确认动画的起始时间。
还可以通过 CSS 的 animation-fill-mode 属性来进一步验证。如果设置了 animation-fill-mode: forwards，动画结束后会保持最后一帧的状态。结合负值延迟，可以更清晰地看到动画的起始位置。通过对比设置正延迟和负延迟时的动画效果，可以准确判断问题所在。
调整延迟值以控制动画范围
要解决动画范围被自动填满的问题，可以调整 animation-delay 的值。如果希望动画从起始位置开始，将 delay 设置为 0s 或省略该属性。如果希望动画从中间位置开始，可以设置适当的负延迟值，但需要确保该值不超过动画的总时长。例如，如果动画总时长为 3s，设置 -1s 的延迟会导致动画从 33% 的位置开始。
在移动端开发中，还可以通过 JavaScript 动态调整延迟值，以适应不同的屏幕尺寸或用户交互。例如，根据设备性能或网络状况，动态设置 delay 值，以优化动画的播放效果。通过合理设置 delay 值，可以避免动画范围被自动填满的问题，同时实现更流畅的动画效果。
资料与延伸阅读
你可以通过以下原始资料核对文中概念，并继续深入阅读。