html - 使用 CSS 动画上下滑动

Question

我试图将一些小的音符图标向上滑出视口(viewport)，我希望它们在向上和滑出页面时从一侧移动到另一侧，几乎就像它们在滑动时摇摆一样上。

我已经设法让它们从一侧滑动到另一侧，然后向上滑动，但我很难让它们同时进行。

如果可能的话，我希望它们也能在到达页面顶部时淡出，但我意识到这可能非常棘手。

这是我到目前为止的进展 - http://codepen.io/anon/pen/QpEWqr

在此先感谢您的帮助!

这是 HTML

<i class="fa fa-music one"></i>
<i class="fa fa-music two"></i>
<i class="fa fa-music three"></i>
<i class="fa fa-music four"></i>
<i class="fa fa-music five"></i>
<i class="fa fa-music six"></i>
<i class="fa fa-music seven"></i>

这是 CSS(来自 font-awesome 的图标)

  .fa-music {
  color: red; 
  font-size: 35px;
}

.one, .four, .six {
 margin-top: 200px; 
 margin-left: 200px;
 position: absolute; 
 animation: sideslidetwo 2s 5, slideup 2s; 
}

.two, .five, .seven {
  margin-top: 150px; 
  margin-left: 250px; 
  animation: sideslide 2s 5, slideup 2s; 
}

.three, .eight {
  margin-left: 100px; 
  animation: sideslidetwo 2s 5, slideup 2s; 
}

@keyframes sideslide {
    0% {
      transform: translate3d(0px, 0px, 0px);
    }
    50% {
      transform:translate3d(30px, 00px, 0px);
    }
    100% {
      transform:translate3d(-50px, 00px, 0px);
    }
  }

@keyframes sideslidetwo {
    0% {
      transform: translate3d(0px, 0px, 0px);
    }
    50% {
      transform:translate3d(-30px, 00px, 0px);
    }
    100% {
      transform:translate3d(50px, 00px, 0px);
    }
  }

@keyframes slideup {
  0% {
    transform: translate3d(0px, 0px, 0px);
}
  100% {
    transform: translate3d(0px, -500px, 0px);
  }
}

Answer 1

这似乎是一般概念。只需使用 translate() 为 x 和 y 轴设置动画，并使用 opacity 使它们淡出

.fa-music {
  color: red;
  font-size: 35px;
  animation: shimmy 1s forwards;
}

div {
  display: flex;
  justify-content: space-between;
  max-width: 60%;
  margin: auto;
  margin-top: 50vh;
}

@keyframes shimmy {
  0% {
    transform: translate(0,0);
  }
  20% {
    transform: translate(-10vh,-10vh);
    opacity: .8;
  }
  40% {
    transform: translate(10vh,-20vh);
    opacity: .6;
  }
  60% {
    transform: translate(-10vh,-30vh);
    opacity: .4;
  }
  80% {
    transform: translate(10vh,-40vh);
    opacity: .2;
  }
  100% {
    transform: translate(-10vh,-50vh);
    opacity: 0;
  }
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet">
<div>
  <i class="fa fa-music one"></i>
  <i class="fa fa-music two"></i>
  <i class="fa fa-music three"></i>
  <i class="fa fa-music four"></i>
  <i class="fa fa-music five"></i>
  <i class="fa fa-music six"></i>
  <i class="fa fa-music seven"></i>
</div>