使用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>