J'ai du mal à animer la position x et y d'un masque.

1) Le masque est une onde et est de type noir sur fond transparent. 2) Le x ou le y peuvent être animés mais ne fonctionnent pas ensemble

Pas à 100% ce que je fais mal, j'ai cherché une résolution dans Stack Overflow mais pour l'instant je n'ai rien trouvé.

Voici le css qui cause le problème:

    #middle{
      display: block;
      -webkit-mask-image: url("waveMask3.png");
      -webkit-mask-position-x: 100px;
      -webkit-mask-position-y: var(--yPos);
      animation: waveX 3s linear forwards infinite, waveY 3s linear forwards infinite;
    }

    @keyframes waveX{
        0%{
            -webkit-mask-position-x:100px;

        }
        50%{
            -webkit-mask-position-x:-900px;

        }
        100%{
            -webkit-mask-position-x:-900px;

        }
    }
    @keyframes waveY{
        0%{
            -webkit-mask-position-y: var(--yPos);
        }
        50%{
            -webkit-mask-position-y:calc(var(--yPos) - 10px);

        }
        100%{
            -webkit-mask-position-y:calc(var(--yPos) - 10px);

        }
    }

Je vous remercie.

0
Paul Hashmi 8 nov. 2019 à 14:05

1 réponse

Pour tous ceux qui ont un problème où ils sont à peu près sûrs que leur code est correct mais l'animation sur leur masque ne donne pas les résultats attendus; sois sûr que

1). Les masques couvrent la partie correcte. Spectacles noirs, transparence se cache. 2). Assurez-vous que la taille et l'orientation de votre masque sont correctes pour afficher l'animation. Mon problème était que ma vague était sur le bord inférieur de mon masque alors qu'elle devait être sur le bord supérieur.

Cela a résolu le problème pour moi ... J'ai pu voir cela en donnant au conteneur une couleur d'arrière-plan et en définissant la largeur, la hauteur et la position.

0
Paul Hashmi 8 nov. 2019 à 12:00