After coding some jQuery, I noticed that the animation is working properly in Chrome but not in IE (version 11.0) or Firefox (32.0.3).
Additionally, I found that if I omit 'opacity: 1;' from my animation class, the element will revert back to its original opacity of 0. Is there a more efficient way to ensure that the element maintains its final value after the animation without explicitly setting it within the animation? It feels counterintuitive to specify element properties within the animation class, as it's unclear when they take effect during the animation process.
Here is an example of the HTML code:
<!-- Appear after 1 second -->
<h1 data-appear='1'>1</h1>
And the corresponding CSS:
h1 {
opacity: 0;
}
@keyframes appear {
0% { opacity: 0; }
50% { opacity: 0; }
100% { opacity: 1; }
}
.appear.delay1 {
animation-duration: 1s;
animation-name: appear;
opacity: 1;
}