Img 属性不会在 CSS 动画结束时持续存在

Question

我想创建一个云图像的动画，该图像悬停在某些包含文本的 DIV 上。

我已经关注了这个帖子css3 transition animation on load?，它几乎可以满足我的需求..

云沿 X 轴平移，其不透明度从 0.2 提高到 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;
        }

虽然有一个问题：在动画开始时，图像（#nuageimage id）在几分之一秒内可见，然后消失并开始动画。

为了解决这个问题，我将opacity: 0 设置为#nuageimage。哪个有诀窍。但随后出现另一个问题：动画结束时设置的 0.95 不透明度不会持续存在，并且云会在动画结束时消失..

CSS 甚至 JS 中的任何解决方案？

Answer 1

设置animation-fill-mode: forwards:

目标将保留执行期间遇到的最后一个关键帧设置的计算值。