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

Question

如何使用setinterval() css动画?

例如，在下面的例子中，我希望div在3000ms后出现动画。我该怎么做呢?

我能从底部0开始吗，就像我在这个页面上选择分钟和日期时改变的价格段一样?

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

jsfiddle例子

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;
}
}

Answer 1

设置animation-delay和animation-fill-mode:forwards，以防止动画结束时div恢复到初始状态。你可以使用不透明度来控制显示元素的时间(我在这里使用了一个深色的主体背景，这样你的白色文本是可见的):

body {
background: #333;
color: #fff;
}
.wrapper {
overflow: hidden;
}
.wrapper div {
font-size: 42px;
position: relative;
animation: mymove 0.3s;
animation-timing-function: ease-in-out;
animation-delay: 3s;
animation-fill-mode: forwards;
opacity: 0;
}
.wrapper div span {
font-size: 24px;
padding-right: 5px;
}
@keyframes mymove {
0% {
opacity: 1;
display: block;
transform: translateY(-70px);
}
100% {
opacity: 1;
display: block;
transform: translateY(0px);
}
}

<div class="wrapper">
<div><span>$</span>2.000</div>
</div>