I'm animating some elements that are set to opacity: 0; in CSS. An animation class is applied to the onClick event, using keyframes, which changes the opacity from 0 to 1 (and a few other changes).
Unfortunately, when the animation ends, the element returns to a state of opacity: 0 (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?
Code (excluding prefix versions):
@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; } } 
![[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 useShorthand:
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