<div class="center">
  <svg width="40" height="90" viewBox="0 0 50 130">
    <rect id="scroll" x="0" y="5" rx="25" ry="25" width="50" height="120" stroke="#F06" fill="#FFF" stroke-width="4"></rect>
    <circle id="circle--shape" cx="25" cy="32" r="8" fill="#F06"></circle>
  </svg>
</div>

.center
  position: absolute
  top: 50%
  left: 50%
  transform: translate(-50%,-50%)
  
#scroll
  animation: animateHeight 1.4s linear .3s 4
  
#circle--shape
  animation: animateShape 1.6s ease-in-out 4
  
@keyframes animateShape 
  50%
    cy: 100
    opacity: .1
    
@keyframes animateHeight
  70%
    height: 105px