Bonjour, 

J'ai essayé de reproduire cette animation du cours créer des animations css modernes.
J'ai réussi et voilà le code :

<div class="container">
   <div class="bar"><div class="plus">+</div></div>
</div>

.container {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;

    .bar {
        width: 300px;
        height: 30px;
        border-radius: 15px;
        background-color: $main-color;
        transform-origin: 15px 15px;
        animation: bar 2s cubic-bezier(.8,0,.2,1) infinite alternate;

        .plus {
            width: calc(100% - 30px); // 2 fois le margin
            margin: 0 15px;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            animation: plus 2s cubic-bezier(.8,0,.2,1) infinite alternate;
            font-weight: bolder;
            font: 2rem "Roboto";
            color: $second-color;
        }
    }
}

@keyframes plus {
    0% {
        opacity: 0;
        transform: translateX(0%) scale(0);
    }

    25% {
    	opacity: 1;
        transform: translateX(0%) scale(1);
    }

    50%, 100% {
        transform: translateX(-50%) scale(1);
    }
}

@keyframes bar {
	0%, 50% {
		transform: rotate(0);
	}
	100% {
		transform: rotate(180deg);
	}
}

Sauf que je voudrais aussi refaire l'animation d'après, pour cela je duplique le code HTML (jusque la tout vas bien), mais si je change la classe "bar" en "box", le plus du haut, change et devient flou... voici une image :

Selon moi ça défie toutes les lois du CSS  

Si vous avez une solution ou une idée ... 
Merci d'avance

-
Edité par AlSnop 18 janvier 2021 à 12:30:33