Partage
  • Partager sur Facebook
  • Partager sur Twitter

Animation qui ne s'affiche pas sous Chrome

    13 septembre 2021 à 14:54:23

    Bonjour !

    J'ai un souci avec une animation qui s'affiche très bien avec Firefox mais pas avec Chrome et je comprend pas pourquoi...

    SCSS :

    .ffanim{
        position: relative;
        width: max-content;
        font-family: "Source Code Pro", monospace;
        font-size: clamp(1rem, 3vw+1rem, 4rem);
        margin-left: .5rem;
        z-index: 5;
    }
    .ffanim::before,
    .ffanim::after{
        content: "";
        position: absolute;
        inset: 0;
    }
    .ffanim::before{
        background: #d1d5db;
    }
    .ffanim::after{
        width: 0.125em;
        background: transparent;
    }
    .ffanim{
        &__p::before{
            animation: write .6s steps(7) 1.2s forwards;
        }
        &__p::after{
            animation: 
                write .6s steps(7) 1.2s forwards, 
                noir 750ms steps(7) 1.2s 2;
    
        }
        &__cvpj::before{
            animation: write .2s steps(1) 25s forwards;
        }
        &__cvpj::after{
            animation: 
                write .2s steps(1) 25s forwards, 
                noir 750ms steps(1) 25s 0;
        }    
    }
    @keyframes write {
        to {
            left: 100%;
        }
    }
    @keyframes noir {
        to {
            background: black
        }
    }

    PHP :

    <div class="ff__1__lab">
            <span class="ffanim ffanim__p">homer</span>
            <div class="ff__1__lab__field w-24"></div>
    </div>
    <div class="ff__4__lab">
            <span class="ffanim ffanim__cvpj">c:\monsupercv.pdf</span> 
            <div class="ff__4__lab__field"></div>
    </div>

     La première partie (ffanim__p) s'affiche très bien sur les 2 navigateurs, mais pas la deuxième partie (ffanim__cvpj) alors que dans le code scss il n'y a pas ou peu de différences entre eux !!

    -
    Edité par d3LTa7 13 septembre 2021 à 14:57:17

    • Partager sur Facebook
    • Partager sur Twitter
      13 septembre 2021 à 16:43:01

      Bonjour,

      Je ne vois aucune animation, que ce soit sur Chrome ou Firefox : https://jsfiddle.net/uk5q1e0f/

      Peux tu s'il te plaît mettre ton code à jour sur le lien que je te montre s'il manque quelque chose?

      Aussi, peux tu nous dire ce que dois faire ton animation?

      • Partager sur Facebook
      • Partager sur Twitter

      Lord Morpheus, Seigneur Morphée, Dieu Grecs des Songes, Fils de la Nuit et du Sommeil

        13 septembre 2021 à 17:59:36

        Ha oui exact.... Au temp pour moi !

        https://codepen.io/OliveSept/pen/KKqWaap

        Ca sera p'tet plus parlant !!

        En faite c'est juste la derniere partie (celle de la pièce jointe) qui ne marche pas avec Chrome

        -
        Edité par d3LTa7 13 septembre 2021 à 18:01:04

        • Partager sur Facebook
        • Partager sur Twitter

        Animation qui ne s'affiche pas sous Chrome

        × Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
        • Editeur
        • Markdown