* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  align-items: stretch;
  width: 100%;
  height: 100%;
  background: #888;
}
.container > div {
  width: 100%;
  height: 100%;
}
.vertical {
  flex-direction: column;
}
.colorblock {
  width: 100%;
  height: 50%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  position: relative;
}
.animblock {
  width: 100%;
  height: 50%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  position: relative;
}

.animblock div,
.colorblock div {
  z-index: 10;
  width: 100%;
  animation: anim2 forwards;
  position: absolute;
  /*animation-timing-function: ease-out; /*cubic-bezier(0.001, 0.01, 0.002, 0.8, 0.06,0.01)*/
}

@keyframes anim2 {
  0% {
    height: 0%;
    
  }

  100% {
    height: 100%;
    
  }
}