37

我正在做一个投资组合，以显示我何时申请下一次学习。因为我们生活在 2012 年，所以它有大量精美的动画和 CSS3 垃圾，只是为了给他们“我们需要这个人”的感觉。我现在有一个小问题。

这是特定元素的一小部分：

/* This is the CSS of the elements with the id called 'fadein' */
#fadein {
    -moz-animation-duration: 2s;
    -moz-animation-name: item;
    -moz-animation-delay: 4.5s;
    -webkit-animation-duration: 5s;
    -webkit-animation-name: item;
-webkit-animation-delay: 4.5s;
opacity:0;
-webkit-opacity:0;
}

@-webkit-keyframes item {
from {
-webkit-opacity: 0;
     }
to { 
-webkit-opacity: 1;
 }
}

请注意，我省略了 Firefox 关键帧，因为它们完全相同。正确的，丑陋格式的 CSS 使带有 id 'fadein' 的元素...淡入。

问题是，动画完成后元素又消失了。这会将格式难看的 Css 变成不可用的 Css。

有人知道如何在动画后保持更改的样式吗？

我想这个问题之前已经被问过，如果是这样，我很抱歉。

4

2 回答 2

69

尝试：

#fadein {
  -webkit-animation-fill-mode: forwards; /* Chrome 16+, Safari 4+ */
  -moz-animation-fill-mode: forwards;    /* FF 5+ */
  -o-animation-fill-mode: forwards;      /* Not implemented yet */
  -ms-animation-fill-mode: forwards;     /* IE 10+ */
  animation-fill-mode: forwards;         /* When the spec is finished */
}
于 2012-02-03T15:30:35.823 回答
1

Duopixels 答案是正确的方法，但不是完全跨浏览器，但是，这个 jquery 插件支持动画回调，您可以在回调函数中按照自己喜欢的方式设置元素：https ://github.com/krazyjakee/jQuery-Keyframes

于 2012-07-15T17:52:54.647 回答