<div class="bubble big-bubble"></div>
<div class="bubble medium-bubble"></div>
<div class="bubble small-bubble"></div>
@import "compass/css3";
html {
height: 100%;
@include filter-gradient(#2ea8e5, #0077b2, horizontal);
@include background-image(radial-gradient(center, ellipse cover, #2ea8e5 0%,#0077b2 100%));
background-size: cover;
}
.bubble {
opacity: 0;
position: absolute;
top: 0; right: 0;
bottom: 0; left: 0;
margin: auto;
border-radius: 50%;
background: #c1f1ff;
-webkit-animation: bubbles-appear, bubbles;
animation: bubbles-appear, bubbles;
-webkit-animation-timing-function: ease-out, ease-in-out;
animation-timing-function: ease-out, ease-in-out;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
&.big-bubble {
height: 35px;
width: 35px;
border: 4px solid #c1f1ff;
@include box-shadow(#e0f9ff 8px 0px 0px inset);
-webkit-animation-duration: 0.05s, 5s;
animation-duration: 0.05s, 5s;
-webkit-animation-delay: 0.9s, 1s;
animation-delay: 0.9s, 1s;
}
&.medium-bubble {
top: 120px;
left: 80px;
height: 25px;
width: 25px;
border: 4px solid #c1f1ff;
@include box-shadow(#e0f9ff 5px 0px 0px inset);
-webkit-animation-duration: 0.05s, 4.9s;
animation-duration: 0.05s, 4.9s;
-webkit-animation-delay: 0.8s, 1s;
animation-delay: 0.8s, 1s;
}
&.small-bubble {
top: 100px;
left: -60px;
height: 15px;
width: 15px;
@include box-shadow(#e0f9ff 3px 0px 0px inset);
-webkit-animation-duration: 0.05s, 4.6s;
animation-duration: 0.05s, 4.6s;
-webkit-animation-delay: 0.7s, 1s;
animation-delay: 0.7s, 1s;
}
}
// Bubbles
@-webkit-keyframes bubbles {
from {
@include transform(translate3d(0px, 0px, 0px));
}
to {
@include transform(translate3d(0, -100px, 0px));
}
}
@keyframes bubbles {
from {
@include transform(translate3d(0px, 0px, 0px));
}
to {
@include transform(translate3d(0, -100px, 0px));
}
}
// Opacity
@-webkit-keyframes bubbles-appear {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes bubbles-appear {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.