Question

我希望使用CSS，jQuery或Velocity.js进行动画，从浏览器窗口的任何一侧滑入到它的最终位置。

我想要动画的所有div都是使用Bootstrap放置的，我希望动画能够从浏览器的特定一侧从外部启动div，然后它会滑动到它的位置＃39 ; s目前没有动画。

基本上，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>

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

1 个答案: