CSS3 Animation time reverse Zoom Fade Out - Andrew Pougher

CSS3 Animation time reverse Zoom Fade Out - Andrew Pougher

HTML

<div class="fade-out four"></div>

<div class="fade-out three"></div>

<div class="fade-out two"></div>

<div class="fade-out one"></div>

CSS

body{margin:20px;background:#000}


@-webkit-keyframes fade-out {
0% { opacity: 1; -webkit-transform: scale(0.5);}
25% { opacity: 1; -webkit-transform: scale(1);}
50% { opacity: 1; -webkit-transform: scale(1.5);}
75% {opacity: 1; -webkit-transform: scale(2);}
100% {-webkit-transform: scale(2.5); opacity: 0;}
}

.fade-out {
    -webkit-animation: fade-out 0.5s ease-in;
    -webkit-animation-fill-mode: forwards;
    -webkit-animation-iteration-count: 1;
    width: 100px;
    height: 100px;
    opacity: 1;
}

.fade-out.three {  background-color: #cc1122; -webkit-animation-delay: 0s;}