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

Question

我的页面上有一些 CSS 动画，其中包含 fadein/out 元素的关键帧。问题是当我加载页面时显示淡出动画。

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;

但是，看看您的代码笔，关键帧动画可能不是您最好的。看起来您只是在使用关键帧来确保某些属性仅在动画结束时发生变化。幸运的是，实际上有一个转换计时功能！

使用转换属性，使用步结束和步开始来实现可见性和指针事件。
用于防止与隐藏元素交互的指针事件。
隐藏时用于从文档流中删除对象的最大高度。

我组装了一支快速编码笔来展示示例。

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

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

How to prevent css keyframe animation on page load?

javascript

css

keyframe

css-animations