css - 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 :

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