如何防止页面加载时的css关键帧动画？

Question

我的页面上有一些带有关键帧的 CSS 动画，用于淡入/淡出元素。问题是当我加载页面时会显示淡出动画。

HTML：

<button class="toggle-good">Toggle display</button>
<p class="box">I move nicely!</p>

CSS：

.box {
  height: 0;
  opacity: 0;
  animation: FadeOut 1s ease-in-out;
}
.box.active {
  height: initial;
  opacity: 1;
  animation: FadeIn 1s ease-in-out;
}
@keyframes FadeIn {
  0% {
    opacity: 0;
    height: initial;
  }
  100% {
    opacity: 1;
    height: initial;
  }
}
@keyframes FadeOut {
  0% {
    opacity: 1;
    height: initial;
  }
  99% {
    opacity: 0;
    height: initial;
  }
  100% {
    height: 0;
    opacity: 0;
    height: 0;
  }
}

JS：

$('button').on('click', function(e) {
  $(this).siblings('.box').toggleClass('active');
})

工作示例： http://codepen.io/MickL/pen/LkvWaA

Answer 1

我尝试了不同的可能性。只有一个有效的方法是通过 JS 使用超时和绝对定位来隐藏它。

如果动画长于设置的超时时间，问题将是。或者动画需要在超时运行之前显示。

$('.box').css({
    'position': 'absolute',
    'top': '-9999px',
    'left': '-9999px'
});

setTimeout(function() {
    $('.box').css({
        'position': 'relative',
        'top': 'auto',
        'left': 'auto'
    });
}, 500);

Answer 2

您需要做的就是： animation-play-state: paused;

但是，看看你的 codepen，关键帧动画可能不是你最好的。看起来您只是在使用关键帧来确保您的某些属性仅在动画结束时更改。幸运的是，实际上有一个过渡计时功能！

1. 使用过渡属性，对可见性和指针事件使用 step-end 和 step-start。
2. 用于防止与隐藏元素交互的指针事件。
3. 隐藏时用于从文档流中移除对象的最大高度。

我已经拼凑了一个快速代码笔来展示一个示例。

http://codepen.io/SudoCat/pen/LkvyEJ?editors=0100