Bonjour a tous

Je suis au Quizz de la partie 3 du cours sur les animation CSS 
Je ne sais pas si ça viens de moi ou du projet cloner depuis Git. 
Mais si on prend par exemple la question 8 pour faire avancer la voiture. 

J'ai beau poser le snippet dans style.scss ou a la fin de _car.scss rien ne fonctionne. 
Pourtant Sass compile bien le fichier .... 
C'est pareille pour tout les snippet proposé dans l'exercice. 

ça viens de moi ou l'exercice bug ? 
Quelqu'un a t'il reussi a faire ce quizz ? 

@keyframes car-animation {
 0% {
   left: 0;
 }
 10% {
   left: 50%;
 }
 100% {
   left: 80%;
 }
}

Bonjour.

Déjà, l'animation que tu as choisie ne correspond pas à la demande que je copie ici :

"Je veux créer un effet où ma voiture démarre tranquillement jusqu'au passage piéton. Elle y marque un bref arrêt, avant de repartir tranquillement vers la partie droite de mon écran."

Dans ton animation, il n'y a pas de "bref arrêt".

Ensuite, cela ne fait rien si tu n'ajoutes pas une règle à ton image. Il te faut quelque chose comme suit en supposant que ton image ait comme identifiant "voiture" et que tu veuilles qu'elle traverse en bas de page l'écran de gauche à droite en 4secondes après un délais de 1s :

#voiture {
    position: absolute;
    bottom: 0;
    animation: 4s 1s car-animation;
}

Merci

La voiture a un id #car 

Dans l'exercice ( QCM ) question 8 j'ai le choix entre 4 snippet de keyFrames a placer dans le repertoire telecharger depuis gitHub. 
Dans le projet il y a un fichier _car.scss 

Et voici le code entier ( avec le snippet ajouté depuis l'exercice ) j'ai testé tout les snippets aucun ne fait avancer la voiture. 

Il faut peut être le placer autre part que dans _car.scss mais je ne vois pas ou .... 

.car {
	height: 60px;
	width: 200px;
	position: absolute;
	bottom: 80px;
	left: 10%;
	background-image: URL("../images/car.png");
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	z-index: 99;
	

	&:hover {
		cursor: pointer;
	}

	.wheel {
		height: 32px;
		width: 32px;
		position: absolute;
		bottom: -9px;
		background-image: URL("../images/wheel.png");
		background-position: center;
		background-repeat: no-repeat;
		background-size: contain;

		&.back {
			left: 28px;
		}
		&.front {
			left: 155px;
		}
	}
}

@keyframes car-animation {
	from {
	  left: 0;
	}
	30%, 40% {
	  left: 20%;
	}
	100% {
	  left: 80%;
	}
   }

-
Edité par Tortue_Ninja 1 octobre 2021 à 10:06:33

Bonjour,

Où se trouve l'appel à ton animation car-animation? En l'état, c'est normal que ta voiture n'avance pas, tu ne lui applique aucune animation.

Essaye d'ajouter ceci à ta .car :

animation: car-animation 10s;

Sais tu que l'exercice ne te demande pas "absolument" de le télécharger le répertoire! Il te le dit pour t'aider à répondre et appliquer les choses apprise en amont, mais tu n'en as pas besoin pour répondre aux questions.

J'ai monté rapidement ce code avec le CSS que tu fournis, voici le rendu : https://jsfiddle.net/52ebxw0n/1/

-
Edité par Lord Morpheus 1 octobre 2021 à 11:06:22

Le code que je fournis ce trouve dans le répertoire part-3-activity du dépôt fournis par openClassRoom en début de quiz. 
un grand merci car en ajoutant : 

animation: car-animation 10s;

Maintenant ça fonctionne. 

J'aurai du me creuser un peu plus la tête pour remarquer qu'il manquer cette ligne de code. ( tout le reste etait fournis par default )
En tout cas chapeau tu as résolu mon problème Merci.

Rien a voir, mais il y a une différence entre CodePen et JSFiddle ?