<div class="cont">
  <div class="coco">
    <div class="lempi">
    HOLAAA2
    </div>
  </div>
  <div class="coco">
    <div class="lempi">
    HOLAAA
    </div>
  </div><div class="coco">
    <div class="lempi">
    HOLAAA
    </div>
  </div>
  <div class="coco">
    <div class="lempi">
    HOLAAA
    </div>
  </div>
  <div class="coco">
    <div class="lempi">
    HOLAAA
    </div>
  </div><div class="coco">
    <div class="lempi">
    HOLAAA
    </div>
  </div>
</div>
<div class="mask"></div>
.cont {
  display: flex;
}
.mask {
  position:absolute;
  background-color: #FFF;
  top: 0;
  bottom: 0;
  left: 0;
  right: 100%;
  
  animation-name: swipe;
  animation-duration: 0.6s;
  animation-delay: 3s;
  animation-iteration-count: 2;
  animation-timing-function: linear;
  animation-direction: alternate;
}

body {
  background-color:lightgreen;
}

.lempi {
  color: #F00;
  display: ab
}
.coco {
  width: 100px;
  height: 100px;
  background-color: navy;

  animation-name: tutsFade;
  animation-duration: 0.6s;
  animation-delay: 3s;*/
  animation-iteration-count: 1;
  animation-timing-function: linear;
  animation-direction: alternate;
  animation-fill-mode: forwards;
}

@keyframes tutsFade {
  0% {
    opacity: 1;
  }
  99% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@keyframes swipe {
  0% {
    right: 100%;
  }
  100% {
    right: 0%;
  }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.