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

.animate-zoom-in{
  animation: zoomin 10s ease-out forwards;
  transform-origin: bottom right;
}

@keyframes Grow {
  from{
    width: 120px;
    height: 150px;
  }to{
    width: 335px;
    height: 450px;
  }
}

@keyframes Shrink{
  from{
    width: 335px;
    height: 450px;
  }to{
    width: 120px;
    height: 150px;
  }
}

@keyframes Squished{
  from{
    width: 335px;
  }to{
    width: 0;
  }
}

@keyframes Expand{
  from{
    width: 0;
    height: 450px;
  }to{
    width: 335px;
    height: 450px;
  }
}

.animate-grow{
  animation: Grow 1s ease forwards;
}

.animate-shrink{
  animation: Shrink 1s ease forwards;
}

.animate-squished{
  animation: Squished 1s ease forwards;
}

.animate-expand{
  animation: Expand 1s ease forwards;
}