如何防止CSS关键帧动画在页面加载? [英] How to prevent css keyframe animation on page load?

问题描述

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

I have some CSS animation with keyframes on my page for fadein/out elements. The problem is that the fadeout animations are shown when i load the page.

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

推荐答案

所有您需要做的是:动画播放状态:已暂停；

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

However, having a look at your codepen, keyframe animations probably aren't your best best. It looks like you're just using the keyframes to ensure some of your properties only change at the end of the animation. Luckily, there's actually a transition timing function for this!

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

我用一支快速的代码笔来演示一个例子.

I've spun together a quick code pen to show an example.

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

这篇关于如何防止CSS关键帧动画在页面加载?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！