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 毫秒，之后，淡入动画开始将 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;