CSS-анимация «Пузыри»

Цикличная CSS-анимация с пузырями

HTML

HTML:

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Анимация SVGPNG.RU</title>
  <link rel="stylesheet" href="style.css">
   </head>
 <body>
 <div class = "cont">
 <div class = "blue-blooop" id = "no1" > </div>
 <div class = "blue-blooop" id = "no2" > </div>
 <div class = "blue-blooop" id = "no3" > </div>
 <div class = "blue-blooop" id = "no4" > </div>
 <div class = "blue-blooop" id = "no5" > </div>
 <div class = "blue-blooop" id = "no6" > </div>
 <div class = "tank2">
 <div class = "blooop" id = "no1" > </div>
 <div class = "blooop" id = "no2" > </div>
  <div class = "blooop" id = "no3" > </div>
  <div class = "blooop" id = "no4" > </div>
  <div class = "blooop" id = "no5" > </div>
  <div class = "blooop" id = "no6" > </div>
  
 </div> 


</div>
 </body>
</html>

CSS

CSS:

.cont{
height: 120px;
width: 100px;
position: absolute;
padding-top:20px;
overflow:hidden;

}


.tank2{

height: 80px;
width: 80px;
background: #0267FF;
background-size: cover;
position: absolute;
border-radius: 100px;
border-width:10px;
border:solid;
border-color:#fff;
left: 7px;
top: 27px;
overflow:hidden;
animation-name: tank2A;
animation-duration: 10s;
animation-iteration-count: infinite;
animation-timing-function: ease;
}

.blooop{
position: absolute;
width: 15px;
height: 15px;
top: 10px;
left:10px;
background:#fff;
border-radius:20px;


}

.blue-blooop{

position: absolute;
width: 15px;
height: 15px;
top: 10px;
left:10px;
background:#0267FF;
border-radius:20px;
transform:translateY(33px) translateX(11px);


}


#no1{
top:-10px;
animation-name: blooopA1;
animation-duration: 10s;
animation-iteration-count: infinite;
animation-timing-function: ease-out;

}
@keyframes blooopA1 {
0%{top:50px; opacity:1; width:15px; height:15px;}
10%{top:-50px; opacity:1;width:1px; height:1px;}
99%{top:-50px; opacity:0;width:15px; height:15px;}
100%{top:70px; opacity:0;width:15px; height:15px;}
}

#no2{
top:-10px;
left: 20px;
animation-name: blooopA2;
animation-duration: 10s;
animation-iteration-count: infinite;
animation-timing-function: ease-out;

}
@keyframes blooopA2 {
0%{top:50px; opacity:0; width:15px; height:15px;}
2%{top:50px; opacity:0; width:15px; height:15px;}
3%{top:50px; opacity:1; width:15px; height:15px;}
13%{top:-50px; opacity:1;width:1px; height:1px;}
99%{top:-50px; opacity:0;width:15px; height:15px;}
100%{top:70px; opacity:0;width:15px; height:15px;}
}


#no3{
top:-10px;
left: 30px;
animation-name: blooopA3;
animation-duration: 10s;
animation-iteration-count: infinite;
animation-timing-function: ease-out;

}
@keyframes blooopA3 {
0%{top:50px; opacity:0; width:15px; height:15px;}
1%{top:50px; opacity:0; width:15px; height:15px;}
2%{top:50px; opacity:1; width:15px; height:15px;}
13%{top:-50px; opacity:1;width:1px; height:1px;}
99%{top:-50px; opacity:0;width:15px; height:15px;}
100%{top:70px; opacity:0;width:15px; height:15px;}
}

#no4{
top:-10px;
left: 40px;
animation-name: blooopA4;
animation-duration: 10s;
animation-iteration-count: infinite;
animation-timing-function: ease-out;

}
@keyframes blooopA4 {
0%{top:50px; opacity:1; width:15px; height:15px;}
9%{top:-50px; opacity:1;width:1px; height:1px;}
99%{top:-50px; opacity:0;width:15px; height:15px;}
100%{top:70px; opacity:0;width:15px; height:15px;}
}


#no5{
top:-10px;
left: 50px;
animation-name: blooopA2;
animation-duration: 10s;
animation-iteration-count: infinite;
animation-timing-function: ease-out;

}


#no6{
top:-10px;
left: 60px;
animation-name: blooopA3;
animation-duration: 10s;
animation-iteration-count: infinite;
animation-timing-function: ease-out;


}