Question

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

我设法让他们从一边到另一边，然后向上，但是我很难让他们同时做到这一点。

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

这是我现在已经走了多远 - 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>

使用CSS动画向上滑动并左右移动

1 个答案: