使用纯 CSS 向右滑动效果答案

【问题标题】：Slide right effect with pure CSS使用纯 CSS 向右滑动效果
【发布时间】：2015-01-15 06:35:50
【问题描述】：

我需要让某个元素（位置：固定）从屏幕右侧滑动，在那里停留一会儿，然后再次从右侧隐藏。我不知道宽度，这使得它更难实现。我以前用 jQuery 做过，但我想用纯 CSS。那可能吗？我不介意使用第三方解决方案。

这是我的 jQuery 代码：

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

【问题讨论】：

这并不意味着没有任何 HTML。你不知道什么的宽度？动画可以用 CSS 完成，但你打算如何触发它？

标签： css animation slide

【解决方案1】：

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

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

&lt;div&gt;&lt;/div&gt;

【讨论】：

很酷的效果，但是用 CSS 做动画总是感觉笨重。
@slime 你最好习惯这种笨拙，它会一直存在
@JuanMendes 对于某些人来说是肯定的，但是使用 % 来计算时间间隔是非常愚蠢的，需要重新设计，在有更好的地方之前我不会支持它。
@slime - 标题说 纯 CSS，句号！顺便说一句，它不是一些核心数学。只需 100% / 7 = 14.28% 和 100% - 14.28% = 85.71%。
它工作得很好，但有一个问题。右 -100% 实际上是窗口到边缘的宽度距离，而不是元素的边缘。这会在元素到位之前产生延迟。可以改为按元素的宽度移动吗？