oSHDian.style.animation = "appear 3s 1 linear,move 1s infinite linear";这段代码的动画执行结构是怎么样的

根据你提供的代码，这段代码为一个元素添加了两个动画，分别为"appear"和"move"。其中，"appear"动画将在3秒内执行一次，执行速度为线性，执行完后保持最终状态；"move"动画是一个无限循环动画，每次执行需要1秒，执行速度也是线性的。

因此，这段代码的动画执行结构如下：

1. 开始执行"appear"动画，持续3秒，执行速度为线性。

2. "appear"动画执行完成后，元素将保持最终状态。

3. 开始执行"move"动画，每次执行需要1秒，执行速度为线性。

4. "move"动画将一直循环执行，直到你通过JavaScript代码停止它或者将元素从页面中移除。

需要注意的是，如果两个动画有相同的CSS属性，后面的动画会覆盖前面的动画。因此，请确保你的两个动画的CSS属性不会相互影响。

相关问题

function SHD(){ setTimeout(function() { oSHDian.style.animation = "appear 3s 1 linear"; }, 2000) oSHDian.style.opacity = "1" } SHD()为什么每次都会显示opacity='1'

这是因为在`SHD()`函数中，`oSHDian.style.opacity`被设置为1，而`setTimeout`函数中设置的`oSHDian.style.animation`是在2秒后才被执行的。所以在2秒后，`oSHDian.style.opacity`已经被设置为1了，因此无论`setTimeout`中的动画是否被执行，`oSHDian`元素的`opacity`都是1。如果想要在动画执行完毕后再设置`oSHDian.style.opacity`为1，可以在`setTimeout`函数的回调函数中添加一个延迟，确保动画已经执行完毕。例如：

function SHD() {
  setTimeout(function() {
    oSHDian.style.animation = "appear 3s 1 linear";
    setTimeout(function() {
      oSHDian.style.opacity = "1";
    }, 3000);
  }, 2000);
}

这样，在延迟3秒后，`oSHDian`元素的`opacity`才会被设置为1。

setTimeout(function() { oSHDian.style.animation = "appear 3s 1 linear"; oSHDian.style.animationFillMode = "forwards"; }, 2000);为什么动画没有保留动画结束的状态

根据你提供的代码，我可以看出你使用了animation-fill-mode属性，并将其设置为forwards。这意味着动画结束后元素将保持在动画结束的状态，即保留动画结束的状态。

如果你的动画没有保留动画结束的状态，可能有以下原因：

1. 你的动画没有正确地结束。请确保你的动画正常结束，并且没有被其他样式或JavaScript代码覆盖。

2. 你的元素可能被重置了。如果你在动画完成后改变了元素的样式或属性，则可能会重置元素，并且动画结束后元素将回到其原始状态。

3. 你的animation-fill-mode属性设置不正确。请确保你的animation-fill-mode属性设置为forwards，以确保元素保留动画结束的状态。

希望这些提示能帮助你找到问题所在。