CSS Animation property stays after animating
I think you're looking for animation-fill-mode
CSS3 property
https://developer.mozilla.org/en/CSS/animation-fill-mode
The animation-fill-mode CSS property specifies how a CSS animation should apply styles to its target before and after it is executing.
for your purpose just try to set
h2 {
animation: fadeIn 1s ease-in-out 3s;
animation-fill-mode: forwards;
}
Setting forwards value «the target will retain the computed values set by the last keyframe encountered during execution»
In addition to the answer of @Fabrizio Calderan, it has to be said that you can even apply the animation-fill-mode
property forwards
directly to animation
. So the following should also work:
@keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 0.9;
}
}
h2 {
opacity: 0;
animation: fadeIn 1s ease-in-out 3s forwards;
}
<script src="//cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<h2>Test</h2>
I had something similar happening to me. I added position:relative to the element that was animating and that fixed it for me.
How to animate an element and get it to stay as the animation is done:
// Beggin
#box {
/* Give it a width, a height and a background so can see it */
width: 200px;
height: 200px;
/* Unimportant styling */
box-shadow: 0 0 10px 0 rgba(0, 0, 0, .4) inset;
border-radius: 7px;
background: linear-gradient(to bottom, #fff 30%, #fcfcfc 40%, #f8f8f8 50%, #f0f0f0 100%);
/* Starts here: */
opacity: 0;
animation: yourName 2800ms ease-in-out 0s forwards;
}
@keyframes yourName {
0% /* (from) */ {
opacity: 0;
}
100% /* (to) */ {
opacity: 1;
}
}
<div id="box"></div>