如何保持动画后的样式？ [英] How to keep styles after animation?

问题描述

我在投资组合工作，以显示我申请我的下一个研究。
因为我们生活在2012年，它有很多漂亮的动画和CSS3垃圾，只是给他们'我们需要这家伙'的感觉。我现在有一个小问题。

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

  / *这是具有id为'fadein'的元素的CSS * / 
 #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关键帧，因为他们是相同的。
使用id'fadein'...的元素的右边，丑陋的格式化的CSS ... fade in。

问题是，元素动画完成。
这将丑陋格式的Css变成不可用的Css。

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

解决方案

尝试使用：

/ p>

  #fadein {
 -webkit-animation-fill-mode：forward; / * Chrome 16+，Safari 4 + * / 
 -moz-animation-fill-mode：forward; / * FF 5 + * / 
 -o-animation-fill-mode：forward; / *尚未实现* / 
 -ms-animation-fill-mode：forward; / * IE 10 + * / 
 animation-fill-mode：forward; / *当规格完成时* / 
} 
  

I'm working at a portfolio to show when I apply for my next study. Since we're living in 2012, it has tons of fancy animations and CSS3 junk, just to give them the 'We need this guy' feeling. I'm having a little problem at the moment.

This is a small part of a specific element:

/* 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;
 }
}

Please note that I left out the Firefox keyframes, since they are quite the same. Right, ugly-formatted CSS that makes elements with the id 'fadein'... fade in.

The problem is, the elements disappear again after the animation is finished. This turns ugly-formatted Css into unusable Css.

Does anybody have any idea how to keep the changed style after the animation?

I guess this question has been asked before and I'm pretty sorry for that if so.

解决方案

Try with:

#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*/
}

这篇关于如何保持动画后的样式？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！