Keep CSS animation in final state at end
P粉950128819
2023-08-20 18:36:55
<p>I'm animating some elements that are set to <code>opacity: 0;</code> in CSS. An animation class is applied to the onClick event, using keyframes, which changes the opacity from <code>0</code> to <code>1</code> (and a few other changes). </p>
<p>Unfortunately, when the animation ends, the element returns to a state of <code>opacity: 0</code> (in both Firefox and Chrome). My instinct is that animated elements will remain in their final state, overriding their original properties. Isn't this true? If not, how can I keep the element in its final state? </p>
<p>Code (excluding prefix versions): </p>
<pre class="brush:php;toolbar:false;">@keyframes bubble {
0% { transform:scale(0.5); opacity:0.0; }
50% { transform:scale(1.2); opacity:0.5; }
100% { transform:scale(1.0); opacity:1.0; }
}</pre>
<p><br /></p>
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
If you use more animation properties, you can use Shorthand :
Set like this:
bubbleAnimation name2sDurationlinearTime function0.5sDelay1Number of iterations (can be 'infinite')normalDirectionforwardsfill mode (set to 'backwards' if you wish to be compatible with using the end position as the final state [this is to support browsers with animations turned off] {only answer headers, not your specific situation})Available time functions:
Available directions:
Try adding
animation-fill-mode: forwards;. For example, you can use abbreviations like this:https://developer.mozilla.org/en-US/docs/Web/CSS/animation-fill-mode