使用纯CSS实现向右滑动效果

Question

我需要使某个元素（具有position: fixed属性）从屏幕右侧滑动，停留一段时间，然后再从右侧隐藏。我不知道它的宽度，这使得实现更加困难。我以前用jQuery实现过，但我想使用纯CSS。这可行吗？我不介意使用第三方解决方案。

以下是我的jQuery代码：

$("element")
    .css("right", -$("element").outerWidth() + "px")
    .animate({right: 0}, 800)
    .delay(3000)
    .animate({right: -$("element").outerWidth() + "px"}, 800);

- Robo Robok

---

没有任何HTML，这就没有意义。你又不知道什么的宽度？CSS可以做动画，但你打算如何触发它？ - Waxi

Answer 1

您可以定义@keyframes，并使用百分比值来设置transform属性，如果width未知的话。

div {
  width: 100px;
  height: 100px;
  background: plum;
  transform: translateX(100%);
  position: fixed;
  -webkit-animation: anim 3.5s 1;
  animation: anim 3.5s 1;
}
@-webkit-keyframes anim {
  0% {
    transform: translateX(100%);
  }
  14.28% {
    transform: translateX(0);
  }
  85.71% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(100%);
  }
}
@keyframes anim {
  0% {
    transform: translateX(100%);
  }
  14.28% {
    transform: translateX(0);
  }
  85.71% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(100%);
  }
}

<div></div>

- Weafs.py

---

非常酷的效果，但是使用CSS进行动画总是感觉笨重。 - Waxi

你最好适应那种笨拙的操作，因为它会一直存在。 - Ruan Mendes

@slime - 这个标题说的是 pure CSS，就是纯CSS！顺便说一下，这不是什么超难的数学问题。只需要用公式 100% / 7 = 14.28% 和 100% - 14.28% = 85.71% 即可。 - Weafs.py

它的效果非常好，但有一个问题。-100％实际上是窗口距离边缘的宽度距离，而不是元素的边缘。这会导致元素进入位置之前出现延迟。是否可以改为根据元素的宽度移动？ - Robo Robok

@RoboRobok - 是的，你可以使用transform属性。我已经更新了答案。 - Weafs.py