CRÉDIT : @kouryde_i

si tu ne crédites pas je te retrouve

<!-- =========================================================

POUPÉE DE PAGE QUI COURT

NOTE : il te faut 4 sprites de course pour ça. genre, quatre images différentes de ton personnage en train de marcher.

========================================================= -->

<div class="pagedoll-runner" id="pagedoll-runner">

<!--

Les quatre images de course sont toutes chargées en même temps. Le CSS gère l'animation en faisant un fondu entre elles.

-->

<img

src="your_image_link"

alt=""

class="pagedoll-frame pagedoll-frame-1"

draggable="false"

>

<img

src="your_image_link"

alt=""

class="pagedoll-frame pagedoll-frame-2"

draggable="false"

>

<img

src="your_image_link"

alt=""

class="pagedoll-frame pagedoll-frame-3"

draggable="false"

>

<img

src="your_image_link"

alt=""

class="pagedoll-frame pagedoll-frame-4"

draggable="false"

>

<!-- sprite de défaite -->

<img

src="your_image_link"

alt=""

class="pagedoll-defeat"

draggable="false"

>

</div>

<style>

/* =========================================================

POUPÉE DE PAGE PRINCIPALE

========================================================= */

.pagedoll-runner {

/* taille */

width: 120px;

height: 120px;

/* position */

position: fixed;

/*

Commence complètement en dehors du côté GAUCHE de l'écran.

*/

left: -140px;

bottom: 12px;

/*

Ordre d'empilement TRÈS élevé.

Certains CSS existants utilisent des valeurs comme 3000 et 20000 donc celui-ci est délibérément bien plus haut.

*/

: 2147483647 !important;

/*

Crée son propre contexte d'empilement.

*/

isolation: isolate;

/*

Ne pas la laisser être affectée par la mise en page de tes boîtes de profil.

*/

margin: 0 !important;

padding: 0 !important;

/*

La poupée entière se déplace à travers la fenêtre.

*/

animation:

pagedoll-cross-screen

8s

linear

infinite;

/*

S'assurer qu'elle peut réellement recevoir les clics.

*/

pointer-events: auto;

cursor: pointer;

/*

Empêcher une sélection bizarre de texte/image.

*/

user-select: none;

-webkit-user-select: none;

/*

Ne pas la laisser créer une barre de défilement horizontale.

*/

overflow: visible;

}

/* =========================================================

TOUS LES SPRITES

========================================================= */

.pagedoll-runner .pagedoll-frame,

.pagedoll-runner .pagedoll-defeat {

position: absolute !important;

left: 0 !important;

top: 0 !important;

width: 120px !important;

height: 120px !important;

/*

Ça empêche le style d'image normal de Janitor d'étirer/rogner les sprites.

*/

object-fit: contain !important;

/*

IMPORTANT :

tous les sprites se superposent directement les uns sur les autres.

*/

margin: 0 !important;

padding: 0 !important;

border: 0 !important;

outline: none !important;

box-shadow: none !important;

/*

Ils ne doivent PAS intercepter le clic.

Le parent .pagedoll-runner le reçoit.

*/

pointer-events: none;

/*

Empêcher le glissement de l'image.

*/

user-select: none;

-webkit-user-drag: none;

}

/* =========================================================

IMAGES DU SPRITE DE COURSE

========================================================= */

/*

Une SEULE image est visible à la fois.

L'animation dure 0,64 seconde :

1 → 2 → 3 → 4 → répéter

Ça fait environ 6,25 images par seconde.

*/

.pagedoll-frame-1 {

opacity: 1;

animation:

pagedoll-frame-1

0.64s

steps(1)

infinite;

}

.pagedoll-frame-2 {

opacity: 0;

animation:

pagedoll-frame-2

0.64s

steps(1)

infinite;

}

.pagedoll-frame-3 {

opacity: 0;

animation:

pagedoll-frame-3

0.64s

steps(1)

infinite;

}

.pagedoll-frame-4 {

opacity: 0;

animation:

pagedoll-frame-4

0.64s

steps(1)

infinite;

}

/* IMAGE 1 */

@keyframes pagedoll-frame-1 {

0%,

24.999% {

opacity: 1;

}

25%,

100% {

opacity: 0;

}

}

/* IMAGE 2 */

@keyframes pagedoll-frame-2 {

0%,

24.999% {

opacity: 0;

}

25%,

49.999% {

opacity: 1;

}

50%,

100% {

opacity: 0;

}

}

/* IMAGE 3 */

@keyframes pagedoll-frame-3 {

0%,

49.999% {

opacity: 0;

}

50%,

74.999% {

opacity: 1;

}

75%,

100% {

opacity: 0;

}

}

/* IMAGE 4 */

@keyframes pagedoll-frame-4 {

0%,

74.999% {

opacity: 0;

}

75%,

99.999% {

opacity: 1;

}

100% {

opacity: 0;

}

}

/* =========================================================

DÉPLACEMENT À TRAVERS TOUT L'ÉCRAN

========================================================= */

@keyframes pagedoll-cross-screen {

/*

Commence en dehors du bord gauche.

*/

0% {

left: -140px;

}

/*

Court sur toute la largeur de l'écran.

*/

100% {

left: calc(100vw + 140px);

}

}

/* =========================================================

SPRITE DE DÉFAITE

========================================================= */

.pagedoll-defeat {

/*

Caché pendant la course.

*/

opacity: 0 !important;

/*

Le placer au-dessus des images de course quand activé.

*/

: 20 !important;

}

/* =========================================================

ÉTAT CLIC / TAPOTEMENT

========================================================= */

/*

L'astuce soignée : :focus-within s'active quand la poupée de page est tapotée/cliquée. Le parent arrête de courir. Les quatre sprites de course disparaissent. Le sprite de défaite apparaît. (ça ne marche pas pour une raison quelconque donc ton personnage court juste en boucle complète)

*/

.pagedoll-runner:focus-within {

animation-play-state: paused;

cursor: default;

}

/* cacher les sprites de course après le clic */

.pagedoll-runner:focus-within .pagedoll-frame {

animation-play-state: paused;

opacity: 0 !important;

}

/* montrer le sprite de défaite */

.pagedoll-runner:focus-within .pagedoll-defeat {

opacity: 1 !important;

}

/* =========================================================

PETIT EFFET DE DÉFAITE

========================================================= */

.pagedoll-runner:focus-within {

animation:

pagedoll-defeat-stop

0.35s

ease-out

forwards;

}

@keyframes pagedoll-defeat-stop {

0% {

transform:

scale(1)

rotate(0deg);

}

35% {

transform:

scale(1.12)

rotate(-8deg);

}

65% {

transform:

scale(0.95)

rotate(6deg);

}

100% {

transform:

scale(1)

rotate(0deg);

}

}

/* =========================================================

BUREAU

========================================================= */

@media screen and (min-width: 769px) {

.pagedoll-runner {

width: 140px;

height: 140px;

bottom: 15px;

}

.pagedoll-runner .pagedoll-frame,

.pagedoll-runner .pagedoll-defeat {

width: 140px !important;

height: 140px !important;

}

}

/* =========================================================

MOBILE

========================================================= */

@media screen and (max-width: 768px) {

.pagedoll-runner {

width: 90px;

height: 90px;

bottom: 8px;

}

.pagedoll-runner .pagedoll-frame,

.pagedoll-runner .pagedoll-defeat {

width: 90px !important;

height: 90px !important;

}

}

/* =========================================================

ACCESSIBILITÉ RÉDUCTION DE MOUVEMENT

========================================================= */

@media (prefers-reduced-motion: reduce) {

.pagedoll-runner {

animation-duration: 12s;

}

.pagedoll-runner .pagedoll-frame {

animation-duration: 1.2s;

}

}

</style>

sois indulgent je cherche encore comment réparer l'animation de défaite