如何保持动画后的样式？

问题描述

我在投资组合工作，以显示我申请我的下一个研究。
因为我们生活在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*/
}

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