Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
CSS Animation
<style>
.bubbles-cont {
z-index: 0;
right: 300px;
position: absolute;
}
.bubbles-cont-2 {
z-index: 0;
left: 0px;
margin-bottom: -30px;
position: absolute;
}
.bubbles-cont .bubbles .fa-linkedin {
position: absolute;
left: 0;
font-size: 50px;
animation: animationFrames linear 10s infinite;
-webkit-animation: animationFrames linear 10s infinite;
-webkit-filter: blur(1.5px);
-moz-filter: blur(1.5px);
-o-filter: blur(1.5px);
-ms-filter: blur(1.5px);
filter: blur(1.5px);
}
.bubbles-cont .bubbles .fa-github {
position: absolute;
left: 100px;
font-size: 20px;
animation: animationFrames linear 13s infinite;
-webkit-animation: animationFrames linear 13s infinite;
animation-delay: 3s;
-webkit-filter: blur(3px);
-moz-filter: blur(3px);
-o-filter: blur(3px);
-ms-filter: blur(3px);
filter: blur(3px);
}
.bubbles-cont .bubbles .fa-twitter {
position: absolute;
left: 200px;
font-size: 40px;
animation: animationFrames linear 15s infinite;
-webkit-animation: animationFrames linear 15s infinite;
-webkit-filter: blur(2.5px);
-moz-filter: blur(2.5px);
-o-filter: blur(2.5px);
-ms-filter: blur(2.5px);
filter: blur(2.5px);
}
.bubbles-cont-2 .bubbles .fa-linkedin {
position: absolute;
left: 10px;
font-size: 40px;
animation: animationFrames linear 9s infinite;
-webkit-animation: animationFrames linear 9s infinite;
-webkit-filter: blur(2.5px);
-moz-filter: blur(2.5px);
-o-filter: blur(2.5px);
-ms-filter: blur(2.5px);
filter: blur(2.5px);
}
.bubbles-cont-2 .bubbles .fa-github {
position: absolute;
left: 67px;
font-size: 30px;
animation: animationFrames linear 10s infinite;
-webkit-animation: animationFrames linear 10s infinite;
animation-delay: 2s;
-webkit-filter: blur(3px);
-moz-filter: blur(3px);
-o-filter: blur(3px);
-ms-filter: blur(3px);
filter: blur(3px);
}
.bubbles-cont-2 .bubbles .fa-twitter {
position: absolute;
left: 180px;
font-size: 26px;
animation: animationFrames linear 13s infinite;
-webkit-animation: animationFrames linear 13s infinite;
animation-delay: 1s;
-webkit-filter: blur(2px);
-moz-filter: blur(2px);
-o-filter: blur(2px);
-ms-filter: blur(2px);
filter: blur(2px);
}
@keyframes animationFrames{
0% {
opacity:.3;
bottom: 0px;
}
100% {
opacity:0;
bottom: 600px;
}
}
@-moz-keyframes animationFrames{
0% {
opacity:.3;
bottom:0px;
}
100% {
opacity:0;
bottom: 600px;
}
}
@-webkit-keyframes animationFrames {
0% {
opacity:.3;
bottom: 0px;
}
100% {
opacity:0;
bottom: 600px;
}
}
</style>
<div class="bubbles-cont-2">
<div class="bubbles">
<i class="fa fa-linkedin"></i>
<i class="fa fa-twitter"></i>
<i class="fa fa-github"></i>
</div>
</div>
<div class="bubbles-cont">
<div class="bubbles">
<i class="fa fa-twitter"></i>
<i class="fa fa-github"></i>
<i class="fa fa-linkedin"></i>
</div>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment