Shrink Animation

by dhavaljani

HTML

<div class="wrapper">
<ul>
<li><img src="http://placehold.it/300x350/" /></li>
<li class="active"><img src="http://placehold.it/300x350/" /></li>
<li><img src="http://placehold.it/300x350/" /></li>
</ul>

</div>

CSS

body {
  background: #666;
}
.wrapper {
  background: #000;
  width: 300px;
  height: 300px;
  border: 2px solid #333;
  margin: 20px auto;
}
.wrapper ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.wrapper ul li {
  width: 100%;
  height: 100%;
  text-align: center;
  display: none;
  overflow: hidden;
}
.wrapper ul li.active {
  display: block;
  animation: expand 3s ease-out;
}
.wrapper ul li img {
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 100%;  
}
@keyframes expand {
  0% {
    transform: scale(1.25);    
  }
  50% {
    transform: scale (1);
  }
   90% {
    opacity: 0.75;
  }
  100% {
  transform: scale(0.25);
  opacity: 0.25;
  }
}