In this tutorial, you will learn how to create a Floating Bubble Animation using pure CSS. Watch the video below for a detailed tutorial.
<body>
<div class="container">
<div class="bubble"></div>
</div>
</body>body {
margin: 0;
background-color: #2e3537;
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
}
.container {
width: 310px;
height: 310px;
perspective: 1200px;
perspective-origin: 50% 50%;
}
.bubble {
width: 100%;
height: 100%;
border-radius: 50%;
position: relative;
background: radial-gradient(circle at 50% 55%, rgba(226,234,250, 0.9), rgba(226,234,250, 0.9) 40%, rgba(226,234,250, 0.8) 60%, rgba(15,108,238, 0.4));
animation: animate 2s ease-in-out infinite;
}
.bubble:before {
content: '';
position: absolute;
width: 40%;
height: 80%;
background: radial-gradient(circle at 130% 130%, rgba(255,255,255,0) 0, rgba(255,255,255,0) 45%,rgba(255,255,255,0.8) 50%, rgba(255,255,255,0.8) 58%, rgba(255,255,255,0) 60%, rgba(255,255,255,0) 100%);
left: 5%;
transform: translateX(1%) translateY(59%) rotateZ(241deg);
filter: blur(2px);
border-radius: 50%;
}
.bubble:after {
content: '';
position: absolute;
width: 80%;
height: 80%;
background: radial-gradient(circle at 50% 80%, rgba(255,255,255,0) 74%, white 80%, white 84%, rgba(255,255,255,0) 100%);
top: 5%;
left: 10%;
border-radius: 50%;
filter: blur(2px);
transform: rotateZ(30deg);
}
@keyframes animate {
0% {
transform: scale(1) translate(0,0px);
}
20% {
transform: scaleY(0.95) scaleX(1.05);
}
50% {
transform: scaleY(0.98) scaleX(0.9) translate(0, 20px);
}
100% {
transform: scale(1) translate(0,0px);
}
}