CSSアニメーションを使用してスライドさせると左右に移動する

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（フォント-素晴らしいからアイコン）

.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

だ、これは一般的な概念であるように思えます。ただ、

.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>

それらをフェードアウトするのx軸とy軸をアニメーション化する translate()を使用し、 opacity