如何将 div 从外部动画转换到最终位置？

Question

我想使用 CSS、jQuery 或 Velocity.js 制作动画，从浏览器窗口的任何一侧滑入到最终位置。

我想要动画的所有 div 都使用 Bootstrap 放置，我希望动画从浏览器的特定一侧从外部启动 div，它会滑到当前没有动画的位置。

基本上，div 和整个网站都构建在所有东西都应该在的地方，我想包含动画以将对象滑动到页面主体上。

我不知道任何 jQuery 或 Velocity 动画，所以请随意提交代码或小提琴。我搜索了很多不同的东西，但我找不到答案。我只看到将它们滑出浏览器窗口的解决方案。

Answer 1

看看这是不是你需要的。关键是animation。

.container {
  font-family: sans-serif;
  background-color: #def;
  position: absolute;
  left: 0;
  top: 0;
  width: 100vw;
  min-height: 100vh;
  padding: 10px;
  box-sizing: border-box;
  overflow: hidden;
  animation: slide-from-right 2s;
}

@keyframes slide-from-right {
  from {
    left: 100vw;
  }
  to {
    left: 0;
  }
}

<div class="container">
  <h1>Lorem Ipsum</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  <form>
    <input placeholder="Some input">
    <input type="submit" value="Submit">
  </form>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>