109

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

这就是我想要达到的目标......

当用户登陆页面时，该元素应该被隐藏，在 3 秒（或其他任何时间）后，它应该淡入并且一旦动画完成它应该保持在那里。

这是一个小提琴尝试...... http://jsfiddle.net/GZx6F/

这是保存的代码...

<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>
4

5 回答 5

195

我认为您正在寻找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;  
}

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

于 2012-03-19T17:26:29.197 回答
16

除了@Fabrizio Calderan的回答，不得不说你甚至可以直接将属性应用到. 因此，以下内容也应该起作用：animation-fill-modeforwardsanimation

@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>

于 2015-02-10T23:07:34.043 回答
1

我也遇到过类似的事情。我添加了位置：相对于正在制作动画并为我修复它的元素。

于 2015-07-30T19:56:51.780 回答
1

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

// 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>

于 2018-07-16T19:40:59.040 回答
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>
于 2021-09-21T19:29:41.190 回答