CSS animations - initialise animation at last frame

I'm doing some CSS animations inside a modal dialog. Here's the pertinent SCSS:

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

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

      $duration: 0.5s;
      $animationFillMode: both;

      &:not(.active):hover, &.active {
        img {
          animation: grow $duration $animationFillMode;
        }
      }

      &:not(.active) {
        img {
          animation: shrink $duration $animationFillMode;
        }
      }

This works well but the problem is, when I open the modal, the animations kick in immediately. For example, because when the modal is first open I'm not hovering on one of the elements, the element instantly shrinks from big to small. I want the element to start in the small state when the modal is open.

Is is possible?

Yes it is, use reverse tag.

Example: animation-direction: reverse;