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;
        }
      }

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

有可能吗？ TIA

Answer 1

是的，使用反向标签。

示例：animation-direction: reverse;

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

CSS animations - initialise animation at last frame

css

sass

css-animations