如何在动画开始前将图像放在页面的可见部分之外？

Question

我想把我的图片放在页面外面怎么做？

         +-------------------+
         | visible page part |
image -> |                   |
         +-------------------+

最后我想在页面内移动图片。

         +-------------------+
         | visible page part |
         | image inside page |
         +-------------------+

Answer 1

您可以使用否定margin或translateX转换来实现此目的。以下代码段有两种方法的示例。

有一点需要注意的是，即使它们的结束输出相似，这两种方法的工作方式也有所不同。虽然translateX(-100%)向左移动元素（在X轴上）的像素宽度与图像的宽度相同，但margin-left: -100%会将图像移动的像素数与图像容器的宽度一样多。因此，如果重点放在可见部分之外的只，那么使用translateX(-100%)会更合适。

＆＃13;

＆＃13;

/* using negative margins */

.margin {
  margin-left: -100%;
  animation: marginmove 1s 3s forwards;
}
@keyframes marginmove {
  from {
    margin-left: -100%;
  }
  to {
    margin-left: 0%;
  }
}

/* using translate transforms */

.translate {
  transform: translateX(-100%);
  animation: translatemove 2s 3s forwards;
}
@keyframes translatemove {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0%);
  }
}

/* Just for demo */

body {
  max-width: 300px;
  margin: 0 auto;
  padding: 0;
  border: 1px solid;
}
html,
body {
  overflow: hidden;
}

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div>Test content</div>
<img src="http://lorempixel.com/100/100/nature/1" class="margin" />

<div>Test content</div>
<img src="http://lorempixel.com/100/100/nature/2" class="translate" />

＆＃13;

＆＃13;

＆＃13;

  

注意：如评论中所述，如果网页的宽度有可能变得小于视口的宽度，那么必须添加{{ 1}}到root / parent元素（如果适用），以防止图像显示在页面的左边框之外。

即使图像是两侧边距相等的居中柱的一部分，您也可以调整上述答案。以下是一个示例代码段，可以帮助您：

＆＃13;

＆＃13;

overflow: hidden

＆＃13;

/* using negative margins */

.margin {
  margin-left: -100%;
  margin-right: 0%;
  animation: marginmove 1s 3s forwards;
}
@keyframes marginmove {
  from {
    margin-left: -100%;
  }
  to {
    margin-left: 0%;
  }
}

/* using translate transforms */

.translate {
  transform: translateX(-100%);
  animation: translatemove 1s 3s forwards;
}
@keyframes translatemove {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0%);
  }
}

/* Just for demo */

.container {
  width: 300px;
  margin: 0 auto;
  border: 1px solid;
  overflow: hidden;
}
.container > div{
  text-align: center;
}

＆＃13;

＆＃13;

＆＃13;