滑动右效果纯CSS

Question

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

这是我的 jQuery 代码：

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

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

<div></div>

滑动右效果纯CSS

Slide right effect with pure CSS

css

animation

slide