图标向上动一动css,使用CSS动画向上滑动并左右移动

图标向上动一动css,使用CSS动画向上滑动并左右移动"/>

图标向上动一动css,使用CSS动画向上滑动并左右移动

我试图将一些小音乐注释图标向上滑出视口，并且我希望它们从一侧移动到另一侧，因为它们向上滑出页面，好像他们在摇摆的同时摇摆。使用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