我试图将一些小音乐注释图标向上滑出视口，并且我希望它们从一侧移动到另一侧，因为它们向上滑出页面，好像他们在摇摆的同时摇摆。使用CSS动画向上滑动并左右移动
我已经设法让他们从一边滑到另一边，但我无法让他们同时做到这一点。
如果可能的话，我希望它们在页面顶部也可以淡出，但是我意识到这可能会非常棘手。
在此先感谢您的帮助！
这里的HTML
而这里的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