网页加载时，CSS上移的动画效果控制

网页加载时，CSS上移的动画效果控制，这个效果是如今网页中使用特别多的，找了很多案例，在这里贴出来方便日后使用。

下面直接贴出代码：

1、CSS代码如下

---

• .animate-box {
  opacity: 0
  }

  @-webkit-keyframes fadeInUp {
  from {
  opacity:0;
  -webkit-transform:translate3d(0, 100%, 0);
  transform:translate3d(0, 100%, 0);
  -webkit-transform:translate3d(0, 50px, 0);
  transform:translate3d(0, 50px, 0)
  }
  to {
  opacity: 1;
  -webkit-transform: none;
  transform: none
  }
  }
  @keyframes fadeInUp {
  from {
  opacity:0;
  -webkit-transform:translate3d(0, 100%, 0);
  transform:translate3d(0, 100%, 0);
  -webkit-transform:translate3d(0, 50px, 0);
  transform:translate3d(0, 50px, 0)
  }
  to {
  opacity: 1;
  -webkit-transform: none;
  transform: none
  }
  }
  .fadeInUp {
  -webkit-animation-name: fadeInUp;
  animation-name: fadeInUp
  }
  .animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both
  }

---

• 2、div代码 加入类即可，如：

  <div class=”animate-box fadeInUp animated”>我需要上移</div>