定时滑动文本框

Question

我正在寻找一种方法来动画我的文本框，以便它滑动到帧从右侧在(x)的时间量。到目前为止，我还没有找到任何可以帮助我制作这个动画的在线资源。

现在，我只有一个简单的(绝对)框。

​

.taskbox {
  width: 230px;
  padding: 15px;
  position: absolute;
  right: 25px;
  top: 25px;
  background-color: black;
  color: white;
  font-family: courier new;
  font-size: 20px;
}

<div class="taskbox">Evidently, the pandemic has taken a toll on the economy! You should find a way to financially stay afloat. Humans have something called 'stipends' to aide in a situation like this. We should <a href="a2_page_3.html">investigate</a>!</div>

​

注意:不太确定这是否需要JavaScript，但我已经为我的问题中没有涉及的元素提供了预先存在的函数。如果需要我的脚本，我非常乐意更新我的帖子。

提前感谢您的帮助！

Answer 1

这可以用CSS来完成，只用animation你可以指定一个持续时间和一个延迟(在你的例子中是x)。矛盾的是，要使元素从右侧滑动，使用left属性定位它会更容易。就像这样的…

​

.taskbox {
  width: 230px;
  padding: 15px;
  left: 100%;
  position: absolute;
  top: 25px;
  background-color: black;
  color: white;
  font-family: courier new;
  font-size: 20px;
  animation: slide-from-right .4s 2s forwards; /* x = 2s */
}

@keyframes slide-from-right {
  to {
    left: calc(100% - 230px - 30px - 25px);
    /* 100% = total width, 230px = element width, 30px = left and right padding, 25px = distance from right border */
  }
}

<div class="taskbox">Evidently, the pandemic has taken a toll on the economy! You should find a way to financially stay afloat. Humans have something called 'stipends' to aide in a situation like this. We should <a href="a2_page_3.html">investigate</a>!</div>

​

Answer 2

您可以为transform: translate设置动画

​

.taskbox {
  width: 230px;
  padding: 15px;
  position: absolute;
  right: 25px;
  top: 25px;
  background-color: black;
  color: white;
  font-family: courier new;
  font-size: 20px;
  transform: translate3d(calc(100% + 25px), 0, 0);
  animation: slide-in 0.5s 1s cubic-bezier(0.3, 1.3, 0.9, 1) forwards;
}

@keyframes slide-in {
  to {
    transform: translate3d(0, 0, 0);
  }
}

<div class="taskbox">Evidently, the pandemic has taken a toll on the economy! You should find a way to financially stay afloat. Humans have something called 'stipends' to aide in a situation like this. We should <a href="a2_page_3.html">investigate</a>!</div>

​

如果你想知道我为什么要使用translate3d，它会触发硬件加速。Check out this article if you're interested。