<!DOCTYPE html>
<html lang="en" >

<head>
   <link rel="stylesheet" href="css/style2.css">
</head>

<body>
 
  <h3>1) Senza effetto</h3>
<div class="blobs step-1">
  <div class="blob"></div>
  <div class="blob"></div>
  <div class="blob"></div>
</div>
  
  <h3>2) Effetto blur</h3>
<div class="blobs step-2">
  <div class="blob"></div>
  <div class="blob"></div>
  <div class="blob"></div>
</div>
  
  <h3>3) Effetto blur + effetto contrast</h3>
<div class="blobs step-3">
  <div class="blob"></div>
  <div class="blob"></div>
  <div class="blob"></div>
</div>

</body>

</html>


.blobs {
    background: #ffffff;
    margin:10px;
}


.blobs.step-2{
      filter: blur(5px);
}
.blobs.step-3{
      filter: blur(5px) contrast(20);
}

.blob {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: red;
    margin: 30px 5px;
    vertical-align: middle;
    display: inline-block;
}

.blob:nth-child(1){
    margin-left:30px;
    animation: anim ease-in-out .8s .1s forwards infinite alternate;
}
.blob:nth-child(2){
    animation: anim ease-in-out .8s .3s forwards infinite alternate;
}

.blob:nth-child(3){
    margin-right:30px;
    animation: anim ease-in-out .8s .7s  forwards infinite alternate;
}

@keyframes return {
  0% { transform: scale(1.4); }
  100% { transform: scale(1); }
}
@keyframes anim {
  0% { transform: scale(1); }
  100% { transform: scale(1.4); }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.