JSFiddle - React, Tailwind, and code Playground

by sjmcpherson

HTML

<div class="circle">
    <div class="overflow">
        <img src="http://jsfiddle.net/img/logo.png" />
    </div>
</div>

CSS

body{background-color:#333;}
.circle{margin:50px auto;background-color:#555;border-radius:50%;width:100px;height:100px;position:relative;

  animation-duration: .5s;
  animation-name: scale;

}
.overflow{width:100px;height:100px;overflow:hidden;position:relative;left:0;top:0;border-radius:50%;
  animation-fill-mode: forwards;
  animation-duration: 1s;
  animation-delay: .5s;
  animation-name: overflow;
}
 img{
  position:absolute;    
  bottom: 150%;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  animation-name: slidein;
}

@keyframes scale {
  from {
    transform: scale(.1);
  }
  to {
    transform: scale(1);
  }
}

@keyframes slidein {
  from {
    bottom: 150%;
  }
  to {
    bottom: 40%;
  }
}

@keyframes overflow {
  from {
    height:100px;
    width:100px;
    oveflow:visible;
  }

  to {
    left:-25px;
    top:-25px;
    height:150px;
    width:150px;
  }
}