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

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元素时，该元素立即可见200ms，之后，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;