css - 延迟动画属性可以覆盖现有的吗？

Question

情况

• DOM 元素初始状态为opacity: 0.
• 我正在向 DOM 元素添加动画类。除了动画，这个类的初始状态为opacity: 1.

.animation { 
    opacity: 1;
    animation(fadeIn 1s 200ms ease-in-out); 
}

• 动画以 200 毫秒的延迟执行，初始状态为opacity: 0.

@keyframes fadeIn {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

问题

当动画类附加到 DOM 元素时，该元素立即可见 200 毫秒，之后，fadeIn 动画开始闪烁 DOM 元素回到不可见状态。与此相反，我希望动画（关键帧）属性opacity:0覆盖动画类属性opacity:1，从而获得平滑的淡入淡出动画。

这种方法的原因是旧浏览器的支持。

编辑：添加了实际的项目代码（用于澄清目的）

@for $i from 1 through 3 {
  &.showAddonColumn#{$i} {

      td:nth-child( #{$i + 1} ) {
          display: table-cell;
      }

      @for $j from 1 through 15 {
          tr:nth-child( #{$j} ) {

              td {

                  .checkable {
                      @include transform-origin(50%, 0%);
                      @include animation(leafShow 1s #{$j*100ms} cubic-bezier(.37,0,.16,.94) 1);
                      @include animation-fill-mode(forwards);
                  }
              }
          }
      }
  }
}

Answer 1

您可以手动延迟动画本身：

@keyframes fadeIn {
    0% { opacity: 0; }
    17% { opacity: 0; }
    100% { opacity: 1; }
}

并扩展动画：

animation: fadeIn 1200ms ease-in-out;