使用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); 
    } 
}

來源

2017-03-03 skoster7

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

來源

2017-03-03 21:04:44

使用CSS動畫向上滑動並左右移動

回答

相關問題