css animations unminified

.zoomInImage {
  animation: zoomInImageA 1s ease-in-out forwards;
}
@keyframes zoomInImageA {
  0% {
    height: BASEIMGHEIGHT;
    width: BASEIMGWIDTH;
    margin-top: 0px;
    margin-left: 0px;
  }
  100% {
    width: WIDTH;
    height: HEIGHT;
    margin-top: TOP;
    margin-left: LEFT;
    }
}
.zoomInContainer {
  animation: zoomInContainerA 1s ease-in-out forwards;
}
@keyframes zoomInContainerA {
  0% {
    width: BASEIMGWIDTH;
    height: BASEIMGHEIGHT;
  }
  100% {
    width: STARTWIDTH;
    height: STARTHEIGHT;
  }
}
.zoomOutImage {
  animation: zoomOutImageA 1s ease-in-out forwards;
  -webkit-animation: zoomOutImageA 1s ease-in-out forwards;
}
@keyframes zoomOutImageA {
  0% {
    height: HEIGHT;
    width: WIDTH;
    margin-top: TOP;
    margin-left: LEFT;
  }
  100% {
    width: BASEIMGWIDTH;
    height: BASEIMGHEIGHT;
    margin-top: 0px;
    margin-left: 0px;
  }
}
.zoomOutContainer {
  animation: zoomOutContainerA 1s ease-in-out forwards;
  -webkit-animation: zoomOutContainerA 1s ease-in-out forwards;
}
@keyframes zoomOutContainerA {
  100% {
    width: BASEIMGWIDTH;
    height: BASEIMGHEIGHT;
  }
}