Img attributes don't persist at the end of CSS animation

Question

I want to create an animation of a image of a cloud hovering over some DIV containing text.

I have followed this thread css3 transition animation on load? which pretty much does what I want..

The cloud translate along X axis and have its opacity raised from 0.2 to 0.95.

@keyframes animnuage {
        0% {
            transform: translateX(40px);
            opacity: 0.2;
        }
        100% {
            transform: translateX(0px);
            opacity: 0.95;
        }

#nuageimage {
            width: 180px;;
            animation-name: animnuage;
            animation-iteration-count: 1;
            animation-timing-function: ease-out;
            animation-duration: 2.5s;
            animation-delay: 0.2s;
        }

Though one issue : at the beginning of the animation the image (which is #nuageimage id) is being visible for a fraction of a second, before disappearing and starting to animate.

To solve this I have set opacity: 0 to #nuageimage. Which does the trick. But then another issue appear: the 0.95 opacity set at the end of the animation doesn't persist and the cloud disappear at the end of the animation..

Any solution in CSS or even JS ?

Answer 1

Set animation-fill-mode: forwards:

The target will retain the computed values set by the last keyframe encountered during execution.