Question

我有以下元素从左向右过渡，如何让它从右向左过渡而页面元素与右边没有任何间隙。

＆＃13;

@keyframes slideInFromLeft {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(0);
  }
}

header {
  /* This section calls the slideInFromLeft animation we defined above */
  animation: 5s ease-out 0s 1 slideInFromLeft;
  z-index: 1;
  background: #333;
  padding: 30px;
  position: fixed;
  top: 10%;
  color: #fff;
}

＆＃13;

<header>
  Test
</header>

＆＃13;

在这里小提琴：https://jsfiddle.net/yy3qtbef/1/。

Answer 1

如果我正确理解您的问题，请添加

right: 20px

到.header类并更改 -

translateX(-100%)

到

translateX(100%)

以下是演示 - https://jsfiddle.net/r0jf2a1y/

Answer 2

要删除不需要的间隙，您需要使用margin: 0删除默认边距（或者您可以将其提供给 body元素），要从右侧滑动它，使用right: 0将其放置在那里，并将transform属性的值更改为translateX(100%)，这将确保在向左滑动之前，元素不在屏幕上：

header {
  animation: 5s ease-out 0s 1 slideInFromRight;
  z-index: 1;
  background: #333;
  margin: 0; /* added */
  padding: 30px;
  position: fixed;
  top: 10%;
  right: 0; /* added */
  color: #fff;
}

@keyframes slideInFromRight {
  0% {
    transform: translateX(100%); /* modified */
  }
  100% {
    transform: translateX(0);
  }
}

<header>Test</header>

从右边过渡元素

2 个答案: