<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%;
}
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.