图像属性不会在 CSS 动画结束时保留

Question

我想创建一个云的图像的动画

我遵循了此线程CSS3过渡动画的负载？几乎可以做我想要的。

云沿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：

目标将保留执行过程中遇到的最后一个密钥帧设置的计算值。