.bubbles {
position: fixed;
overflow: hidden;
width: 100%;
height: 100%;
margin: 0 auto;
bottom: 0;
}

.bubble-container {
position: absolute;
bottom: 0;
will-change: transform;
-webkit-animation: bubblerise 20s infinite ease-in;
-moz-animation: bubblerise 20s infinite ease-in;
-ms-animation: bubblerise 20s infinite ease-in;
animation: bubblerise 20s infinite ease-in;
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
opacity: 0;
}

.bubble {
width: 15px;
height: 15px;
margin: 0 auto;
background: url(../images/bubble.webp) no-repeat center;
background-size: contain;
will-change: transform;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
-webkit-animation: bubblewobble 10s infinite linear;
-moz-animation: bubblewobble 10s infinite linear;
-ms-animation: bubblewobble 10s infinite linear;
animation: bubblewobble 10s infinite linear;
}

@-webkit-keyframes bubblerise {
0% {
bottom: -10%;
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
opacity: 0;
}
5% {
bottom: -10%;
filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);
opacity: 1;
}
99% {
filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);
opacity: 1;
}
100% {
bottom: 100%;
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
opacity: 0;
}
}
@-moz-keyframes bubblerise {
0% {
bottom: -10%;
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
opacity: 0;
}
5% {
bottom: -10%;
filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);
opacity: 1;
}
99% {
filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);
opacity: 1;
}
100% {
bottom: 100%;
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
opacity: 0;
}
}
@-ms-keyframes bubblerise {
0% {
bottom: -10%;
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
opacity: 0;
}
5% {
bottom: -10%;
filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);
opacity: 1;
}
99% {
filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);
opacity: 1;
}
100% {
bottom: 100%;
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
opacity: 0;
}
}
@keyframes bubblerise {
0% {
bottom: -10%;
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
opacity: 0;
}
5% {
bottom: -10%;
filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);
opacity: 1;
}
99% {
filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);
opacity: 1;
}
100% {
bottom: 100%;
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
opacity: 0;
}
}
@-webkit-keyframes bubblewobble {
0% {
margin-left: 0;
}
50% {
margin-left: 2px;
}
}
@-moz-keyframes bubblewobble {
0% {
margin-left: 0;
}
50% {
margin-left: 2px;
}
}
@-ms-keyframes bubblewobble {
0% {
margin-left: 0;
}
50% {
margin-left: 2px;
}
}
@keyframes bubblewobble {
0% {
margin-left: 0;
}
50% {
margin-left: 2px;
}
}