Slide Zoom Splash Animation

by Mohammed Ismail Ansari

HTML

<div class="parent">
    <div class="sheet one">
    </div>
    <div class="sheet two">
    </div>
    <div class="sheet three">
    </div>
    <div class="sheet four">
    </div>
</div>

CSS

html,
body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.parent {
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: black;
}

.sheet {
    position: absolute;
    width: 160px;
    height: 120px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
}

.one {
    background-color: white;
    animation-name: scale;
    animation-duration: 4s;
    animation-delay: 0s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

.two {
    background-color: white;
    animation-name: scale;
    animation-duration: 4s;
    animation-delay: 1s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

.three {
    background-color: white;
    animation-name: scale;
    animation-duration: 4s;
    animation-delay: 2s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

.four {
    background-color: white;
    animation-name: scale;
    animation-duration: 4s;
    animation-delay: 3s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

@keyframes scale {
    from {
        transform: translate(-50%, -50%) scale(0);
        opacity: 1;
    }
  to {
      transform: translate(-50%, -50%) scale(2);
      opacity: 0;
    }
}