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

【问题标题】：CSS animations - initialise animation at last frameCSS 动画 - 在最后一帧初始化动画
【发布时间】：2021-08-10 07:27:22
【问题描述】：

我正在模态对话框中制作一些 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

【问题讨论】：

您能否将相关的 HTML 和相关的 CSS 放入您的问题中，最好作为一个有效的 SO sn-p。
不要使用动画，这里显然需要转场，因为您定义了两个相反的动画（这是转场任务）
谢谢@TemaniAfif - 你能举个例子吗
.xx{transition:1s}.xx:hover {transform:scale(1.1)}

标签： css sass css-animations

【解决方案1】：

是的，使用反向标签。

示例：animation-direction: reverse;

【讨论】：