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

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?

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