javascript - 如何使用 CSS 过渡创建图像之间的过渡？

Question

我仍然是高级 CSS 科目的初学者。我需要在我认为应该使用的徽标之间创建效果CSS Transition。

甚至很难用语言来解释，下面是一个.gif显示我需要做的事情。

正如你所看到的，标志unmont和mount再次。我不知道如何创建这个效果，你能告诉我怎么做吗？无论是仅使用 CSS 还是需要库。欢迎任何帮助。

我创建了一个项目，其中包含一些.svg格式的图像，但我不知道如何创建这种效果。我放入了codesandbox

    import Agtech from "./assets/images/agtech.svg";
    import Embarcaai from "./assets/images/embarcaai.svg";
    import Geoapis from "./assets/images/geoapis.svg";
    import Kpmg from "./assets/images/kpmg.svg";
    import Nuvemshop from "./assets/images/nuvemshop.svg";
    import Paypal from "./assets/images/paypal.svg";

    export const images = [
      {
        id: 1,
        url: Paypal
      },
      {
        id: 2,
        url: Kpmg
      },
      {
        id: 3,
        url: Agtech
      },
      {
        id: 4,
        url: Embarcaai
      },
      {
        id: 5,
        url: Nuvemshop
      },
      {
        id: 6,
        url: Geoapis
      }
    ];

    import "./styles.css";
    import { images } from "./App.utils";

    export default function App() {
      return (
        <div className="App">
          <div className="content">
            {images.map((image, i) => (
              <div key={`image_${i}`} className="image">
                <img src={image.url} alt="" />
              </div>
            ))}
          </div>
        </div>
      );
    }

标签： javascripthtmlcsssasscss-transitions