<div class="circle circle1"></div>
<div class="circle circle2"></div>
<div class="circle circle3"></div>
<div class="circle circle4"></div>
<style>
.circle1{
width: 100px;
height: 100px;
background-color: #937DC2 ;
position: relative;
border-radius: 50%;
animation-timing-function: linear!important;
}
.circle2{
width: 100px;
height: 100px;
background-color: #C689C6 ;
position: relative;
border-radius: 50%;
animation-timing-function: ease!important;
}
.circle3{
width: 100px;
height: 100px;
background-color: #FFABE1 ;
position: relative;
border-radius: 50%;
animation-timing-function: ease-in!important;
}
.circle4{
width: 100px;
height: 100px;
background-color: #FFE6F7 ;
position: relative;
border-radius: 50%;
animation-timing-function: ease-in-out!important;
}
.circle {
animation: mymove 5s infinite;
}
@keyframes mymove {
0% {left: 0;}
50% {left: 100%;}
100% {left: 0;}
}
</style>
<div class="circle-another a-circle1"></div>
<div class="circle-another a-circle2"></div>
<div class="circle-another a-circle3"></div>
<div class="circle-another a-circle4"></div>
<style>
.a-circle1{
width: 100px;
height: 100px;
background-color: #937DC2 ;
position: absolute;
border-radius: 50%;
animation-delay: 1s!important;
}
.a-circle2{
width: 100px;
height: 100px;
background-color: #C689C6 ;
position: absolute;
border-radius: 50%;
animation-delay: 1.5s!important;
}
.a-circle3{
width: 100px;
height: 100px;
background-color: #FFABE1 ;
position: absolute;
border-radius: 50%;
animation-delay: 1.2s!important;
}
.a-circle4{
width: 100px;
height: 100px;
background-color: #FFE6F7 ;
position: absolute;
border-radius: 50%;
animation-delay: 0.52s!important;
}
.circle-another {
animation: mymove-another 5s infinite;
}
@keyframes mymove-another {
0% {scale: 1;}
50% {scale: 1.5;opacity:0;}
100% {scale: 1;}
}
</style>
<div class="circle03 circle031"></div>
<div class="circle03 circle032"></div>
<div class="circle03 circle033"></div>
<div class="circle03 circle034"></div>
<style>
.circle031{
background-color: #937DC2 ;
border-radius: 50%;
animation-delay: 0.7s!important;
}
.circle032{
background-color: #C689C6 ;
border-radius: 50%;
animation-delay: 0.4s!important;
}
.circle033{
background-color: #FFABE1 ;
border-radius: 50%;
animation-delay: 0.8s!important;
}
.circle034{
background-color: #FFE6F7 ;
border-radius: 50%;
animation-delay: 0.9s!important;
}
.circle03 {
animation: mymovenew 2s infinite;
width: 10px;
height: 10px;
display: inline-block;
}
@keyframes mymovenew {
0% {transform: translateY(0px);}
50% {transform: translateY(-15px);}
100% {transform: translateY(0px);}
}
</style>
<div class="bubble"></div>
<style>
.bubble{ width: 300px;
height: 300px;
border-radius: 50%;
box-shadow:
0 0 20px #fff,
-20px 0 80px #f0f,
20px 0 80px #0ff,
inset 0 0 50px #fff,
inset 50px 0 80px #f0f,
inset -50px 0 80px #0ff,
inset 50px 0 300px #f0f,
inset -50px 0 300px #0ff;
animation: pulsate 6s linear infinite;
}
@keyframes pulsate {
50% {
box-shadow:
0 0 20px #fff,
20px 0 80px #f0f,
-20px 0 80px #0ff,
inset 0 0 50px #fff,
inset -50px 0 80px #f0f,
inset 50px 0 80px #0ff,
inset -50px 0 300px #f0f,
inset 50px 0 300px #0ff;
}
}
</style>
English 
