Javascript 如何使用CSS动画延迟和转换？

如何将setinterval（）用于css动画

例如，在下面的示例中，我希望div在3000ms后带有动画。我该怎么做

我能从底部0开始计算吗？比如，当我选择“分”和“日”时，价格段会发生变化吗

---

设置

动画延迟

，以及

动画填充模式：转发

，以防止在动画完成时div恢复到初始状态。您可以使用不透明度来控制何时显示元素（我在这里使用了深色主体背景，以便白色文本可见）：

正文{
背景：#333；
颜色：#fff；
}
.包装纸{
溢出：隐藏；
}
.包装部{
字体大小：42px；
位置：相对位置；
动画：mymove 0.3s；
动画计时功能：轻松进出；
动画延迟：3s；
动画填充模式：正向；
不透明度：0；
}
.包装分区跨度{
字体大小：24px；
右侧填充：5px；
}
@关键帧mymove{
0% {
不透明度：1；
显示：块；
转换：translateY（-70px）；
}
100% {
不透明度：1；
显示：块；
变换：translateY（0px）；
}
}

$2.000

可以，但3000 ms div在动画开始前不应出现。我该怎么做？编辑。请看答案。谢谢。它很有效。我对问题作了补充。你也能看一下吗？如果你想让它从

底部：0

开始，那么只需将它添加到

0%{…}

块中，并根据需要更改

100%{…}

块。请看我给出的示例。那你就会明白了。

<div><span>$</span>2.000</div>

div {
  font-size: 42px;
  position: relative;
  animation: mymove 0.3s;
  animation-timing-function: ease-in-out;
}
div span{
    font-size: 24px;
    padding-right: 5px;
}


@keyframes mymove {
  0% {
    bottom: -70px;
    }
  100% {
    bottom: 0px;
    }
}