[英]CSS animations fadeIn doesn't seem to work
I'm trying to applicate on my webpage a fade in effect on the content of my webpage but instead of getting the fade in effect my content is just "hiding". 我正在尝试在网页上应用渐隐效果,但是我的内容只是“隐藏”,而不是渐隐效果。
This is the CSS I'm using: 这是我正在使用的CSS:
/* make keyframes that tell the start state and the end state of our object */
@-webkit-keyframes fadeIn { from { opacity:0 !important; } to { opacity:1 !important; } }
@-moz-keyframes fadeIn { from { opacity:0 !important; } to { opacity:1 !important; } }
@keyframes fadeIn { from { opacity:0 !important; } to { opacity:1 !important; } }
fadeIn
.fade-in {
opacity:0; /* make things invisible upon start */
-webkit-animation:fadeIn ease-in 1 ; /* call our keyframe named fadeIn, use animattion ease-in and repeat it only 1 time */
-moz-animation:fadeIn ease-in 1 ;
animation:fadeIn ease-in 1;
-webkit-animation-fill-mode:forwards; /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/
-moz-animation-fill-mode:forwards;
animation-fill-mode:forwards;
-webkit-animation-duration:1s ;
-moz-animation-duration:1s ;
animation-duration:1s ;
}
.fade-in.one {
-webkit-animation-delay: 0.7s ;
-moz-animation-delay: 0.7s ;
animation-delay: 0.7s;
}
For this piece of html: 对于这段html:
<div data-role="content" id="contenidoHistoria" class="fade-in one">
<p>Entre los melismas sonoros del rebalaje y las intrincadas calles del antiguo barrio del Perchel, y a la sombra espiritual de su Iglesia parroquial del Carmen, surgió en el año 2005 el sueño colectivo de un grupo de jóvenes de aquel barrio, que bajo el ánimo y el empuje del entonces párroco nuestro querido Manolo Segura- se propusieron poner en marcha la hoy conocida como Banda de Cornetas y Tambores de Nuestra Señora del Carmen del Perchel-Málaga.</p>
</div><!-- /content -->
</div>
If I set opacity as NOT 0 on ".fade-in { opacity:0; /* make things invisible upon start */" I can see the content, but of course that's not what I'm looking for. 如果我在“ .fade-in {opacity:0; / *在启动* /”时使东西不可见,将不透明度设置为NOT 0,则可以看到内容,但是当然这不是我想要的。
Regards. 问候。
Remove the !important
from your animation properties. 从动画属性中删除
!important
。 (And also remove the "fadeIn" just below your keyframe declaration.) (并删除关键帧声明下方的“ fadeIn”。)
Here's a working version: 这是一个工作版本:
http://jsfiddle.net/x62pU/2/ http://jsfiddle.net/x62pU/2/
I also edited the shorthand of the animation declaration to decrease your code. 我还编辑了动画声明的简写形式以减少代码。
I got it to work in firefox, chrome and safari. 我知道它可以在Firefox,Chrome和Safari中使用。 Here is the JSFiddle link.
这是JSFiddle链接。
@-webkit-keyframes fadeIn { 0% { opacity:0; } 100% { opacity:1; } }
@keyframes fadeIn { 0% { opacity:0; } 100% { opacity:1; } }
.fade-in {
opacity:0; /* make things invisible upon start */
-webkit-animation: fadeIn 1s ease-in;
animation: fadeIn 1s ease-in;
-webkit-animation-fill-mode: forwards;
animation-fill-mode:forwards;
}
.fade-in.one {
-webkit-animation-delay: 0.7s;
animation-delay: 0.7s;
}
Hope this helps! 希望这可以帮助!
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.