extend.css

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  background-color: #ff7979;
}

.container{
  position: relative;
  width: 100%;
  height: 100%;
}

.box{
  position: absolute;
  width: 200px;
  height: 200px;
/*  border: solid 2px #4bff9e;*/
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}

.extend{
  width: 100%;
  height: 100%;
}
.extend div{
  float: left;
  width: 40px;
  height: 100%;
  transform: scaleY(0);
}
.extend div:nth-child(2n){
  transform-origin: top;
  background-color: #d7d7fa;
}
.extend div:nth-child(2n-1){
  transform-origin: bottom;
  background-color: #d7fad7;
}

/****************************
* animation
****************************/
.extend div:nth-child(n){
  animation : extend 1.5s linear 0.0s infinite alternate none running;
}


/****************************
* keyframes
****************************/
@keyframes extend{
  0%{
    transform: scaleY(0);
  }
  100%{
    transform: scaleY(1);
  }
}