动画后CSS动画属性保持不变

92

我正在尝试使CSS动画属性在完成后保留，这可能吗？

这就是我想要实现的目标...

当用户登陆页面时，该元素应该被隐藏，在3秒钟（或任何其他时间）之后，该元素应淡入，动画完成后应留在该页面上。

这是保存代码。

<h2>Test</h2>

<style>
@keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 0.9;
    }
}

h2 {
    animation: fadeIn 1s ease-in-out 3s;
}
</style>

我知道如何使用jQuery ..就像这样...

<h2>test</h2>

<script>
  $(document).ready(function(){
    $('h2').hide().delay(3000).fadeIn(3000)
  });
</script>

css css-animations

— 斯帕·霍克
source

是W3Schools的过时了吗？它说Chrome和FireFox仅支持替代产品。

— iambriansreed 2012年

5

@iambriansreed：我一直以为是：）

— BoltClock

4

@iambriansreed甚至都没有点击w3schools的搜索结果。如果您不小心这样做，请把目光从显示器上移开，然后按鼠标上的“后退”按钮。

— doug65536

162

我认为您正在寻找animation-fill-modeCSS3属性

https://developer.mozilla.org/en/CSS/animation-fill-mode

animation-fill-mode CSS属性指定CSS动画在执行之前和之后应如何将样式应用于其目标。

为了您的目的，只是尝试设置

h2 {
  animation: fadeIn 1s ease-in-out 3s;
  animation-fill-mode: forwards;  
}

设置转发值«目标将保留执行期间遇到的最后一个关键帧设置的计算值»

— 法布里佐·卡尔德兰（Fabrizio Calderan）
source

1

谢谢Fabrizio，太好了，我会接受这个答案。只是发生了一件奇怪的事情，我想知道您是否了解任何东西-在iOS上（未测试任何其他东西），每次滚动时，缓动的倒数都会暂停，例如，如果我在页面加载时立即开始滚动它不会消失。但是当我停止滚动时，3秒钟开始倒数。这只是默认的iOS行为吗？谢谢

— SparrwHawk 2012年

多么奇妙的解决方案。

— Lalnuntluanga Chhakchhuak

16

除了答案的@Fabrizio Calderan，但必须说，你甚至可以应用animation-fill-mode属性forwards直接animation。因此，以下内容也应该起作用：

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 0.9;
  }
}

h2 {
  opacity: 0;
  animation: fadeIn 1s ease-in-out 3s forwards;
}

<script src="//cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<h2>Test</h2>

展开摘要

— 伊卡特
source

0

我也发生了类似的事情。我添加了position：相对于动画元素并为我修复了该元素。

— 蒂奥
source

0

如何为元素设置动画并使其在动画完成后保持不变：

// Beggin

#box {
  /* Give it a width, a height and a background so can see it  */
  width: 200px;
  height: 200px;
  /* Unimportant styling */
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, .4) inset;
  border-radius: 7px;
  background: linear-gradient(to bottom, #fff 30%, #fcfcfc 40%, #f8f8f8 50%, #f0f0f0 100%);
  
  /* Starts here: */
  opacity: 0;
  animation: yourName 2800ms ease-in-out 0s forwards;
}

@keyframes yourName {
  0% /* (from) */ {
    opacity: 0;
  }
  100% /* (to) */ {
    opacity: 1;
  }
}

<div id="box"></div>

展开摘要

— codeWithMe
source