Un Gif animé comme masque !

Notes

• Animations CSS avec délais au démarrage pour la classe .stop-color-1-22022024 sur les différents palliers de couleurs des dégradés linéaires.
• Les deux dégradés linéaires sont décalés en x et y, façon miroir, pour créer l’effet central de fondu au blanc (avec l’attribut stop-opacity à 0).
• Gif animé déposée dans la bibliothèque des médias de WordPress – url externe.
• D’après l’oiseau de Yoksel sur CodePen.

Extrait du code – visualisation du <mask>

 <defs>
    <mask id="masque-1-25022024" maskunits="userSpaceOnUse" maskcontentunits="userSpaceOnUse">
      <image xlink:href="https://phospixel.com/wp-content/uploads/2024/02/3b04.gif" width="500" height="280"></image>
    </mask>

    <linearGradient id="gr-1-25022024" x1="0" y1="0" x2="100%" y2="100%">
      <stop offset="15%" class="stop-color-1-22022024  stop-color--1" />
      <stop offset="45%" class="stop-color-1-22022024  stop-color--2" />
      <stop offset="55%" class="stop-color-1-22022024  stop-color--2" />
      <stop offset="85%" class="stop-color-1-22022024  stop-color--3" />
    </linearGradient>

    <linearGradient id="gr-2-25022024" x1="0" y1="100%" x2="100%" y2="0%">
      <stop offset="15%" class="stop-color-1-22022024  stop-color--4" />
      <stop offset="45%" class="stop-color-1-22022024  stop-color--5" stop-opacity="0" />
      <stop class="stop-color-1-22022024  stop-color--5" stop-opacity="0" />
      <stop offset="85%" class="stop-color-1-22022024  stop-color--6" />
    </linearGradient>
  </defs>

  <g mask="url(#masque-1-25022024)" class="mouvement-1-22022024">
    <rect fill="url(#gr-1-25022024)" width="100%" height="100%"></rect>
    <rect fill="url(#gr-2-25022024)" width="100%" height="100%"></rect>
  </g>