Aide animation css/sass

Bonjour :)

J'aimerais avoir un petit coup de pouce pour 2 animations en tailwind et css/sass que j'ai commencé et dont j'aimerais amélioré !

La première est d'ajouté à une barre de progression quelques petits détail plus sympa... Voici déjà la barre en question :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
                        <div class="relative pt-1 mx-4">
                            <div class="flex mb-2 items-center justify-between">
                                <div>
                                    <span class="text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-red-600 bg-red-200">progress!</span>
                                </div>
                                <div class="text-right">
                                    <span class="text-xs font-semibold inline-block text-red-600">90%</span>
                                </div>                    
                            </div>
                            <div class="progress overflow-hidden h-5 mb-4 text-xs flex rounded bg-red-200">                    
                                <div style="width:90%" class="progress__bar progress__bar--up shadow-none flex flex-col text-center whitespace-nowrap justify-center"></div>
                            </div>
                        </div>

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
$prog-bar-dure: 2000ms;
$prog-bar-delay: 1000ms;
$up: #E34F26;
 
.progress{
    &__bar{        
        transform: scaleX(0.5);
        transform-origin: left;
        animation: progress-bar $prog-bar-dure $prog-bar-delay alternate both;
        &--up{
            background-color: $up;
        }
    }
}
 
@keyframes progress-bar{
    0% {
        transform: scaleX(0);
    }
    100%{
        transform: scaleX(1);
    }
}

Et du coup j'aimerais savoir comment je pourrais ajouter un effet de changement de chiffre dynamique. Sur mon code, le 90% est affiché directement, mais serait-il possible que ce chiffre commence de 0% et qu'il aille à 90% en même temps que la progression de la barre ? Et si oui comment je pourrais m'y prendre ?

D'autre part j'aimerais aussi régler le delay au moment ou l'utilisateur est dessus car l'animation commence après 1 seconde au chargement de la page mais la barre n'est pas en haut de page... Du coup peut être un réglage avec le scroll ?

La deuxième animation :

Code:

1
2
3
4
5
6
            <div class="pf col-span-3 mx-4 flex flex-col items-center justify-center">            
                <div class="pf__chat">
                    <h3>Les Chats</h3>
                    <img class="pf__chat--img" src="pics/chat.png"/> 
                </div>
           </div>

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
.pf{
    &__chat{      
        &--img{
        width: 20rem;
        border-radius: 100rem;
        border: 0px solid #000000;
        cursor: pointer;
            &:hover{
                animation: rad 2000ms 0ms ease-in-out both;
            }
        }
    }
}
@keyframes rad {
    100% {
        border-radius: 10px;
        transition : border-radius;
    }
}

ici on a une image ronde au départ et qui va devenir plus carré en hover... Le souci c'est que j'ai beau mettre 0seconde au delai de l’animation, mais j'ai l'impression qu'il prend en delai la valeur de la durée... Quand je met 3000ms par exemple, il mets autant de temps à partir... pourtant dans l'inspecteur, il affiche bien 0ms à animation-delay..

Désolé je voulais partager mes codes avec un petit codepen ou autre mais vu que je travail avec tailwindcss je ne sais pas trop comment faire pour partager un code avec ce framework :/

Merci d'avance :)