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

问题描述:

我试图将一些小音乐注释图标向上滑出视口,并且我希望它们从一侧移动到另一侧,因为它们向上滑出页面,好像他们在摇摆的同时摇摆。使用CSS动画向上滑动并左右移动

我已经设法让他们从一边滑到另一边,但我无法让他们同时做到这一点。

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

这里有多远,我起身到现在 - 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); 
    } 
} 

好像这是一般概念。只需使用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>