Question

我有一个使用纯CSS的动画 - 我有一个div - 包含一堆p标签 - 我想一次丢一封信 - 这有效 - 但为什么我不在底部看到这封信？

我想看到每个字母都留在页面底部 - 我尝试使用底部像素，但结果是一样的。

我缺少什么想法？

<!doctype html>
<html>
<head>
</head>

<style>


#main
{
  position: absolute;
  width: 500px;
  height: 500px;
}

#main > p
{
  float:left;
  position: relative;
}

.letter:nth-child(1) {
    animation: bottom 5s  1s;
}
.letter:nth-child(2) {
    animation: bottom 5s  2s;
}
.letter:nth-child(3) {
    animation: bottom 5s  3s;
}


@keyframes bottom 
{ 
   0% {bottom: 100%;}
   100%{bottom:0%;}
}


</style>


<body>


<div id="main">
    <p class='letter'>A</p>
    <p class='letter'>B</p>
    <p class='letter'>C</p>
</div>


</body>

</html>

Answer 1

首先，你应该让你的字母或p标签成为absolutley。你会以这种方式获得更好的表现。

第二次将forwards添加到动画中。

animation: bottom 5s 3s forwards;

这将使你的信件停留在动画结束。

查看此笔：https://codepen.io/ivandoric/pen/VXgMNE

CSS3动画 - 从下到上的字母

1 个答案: