CSS 动画 - 在最后一帧初始化动画

Question

我正在模态对话框中制作一些 CSS 动画。这是相关的 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;
        }
      }

这效果很好，但问题是，当我打开模式时，动画立即启动。例如，因为当模态第一次打开时，我没有将鼠标悬停在其中一个元素上，所以该元素立即从大缩小到小。我希望元素在模式打开时以小状态启动。

可以吗？

Answer 1

是的，使用反向标签。

示例：

animation-direction: reverse;