Déplacement de fichiers et cohérence des header d'exercices
This commit is contained in:
394
exercices/memory-pictogrammes/assets/css/animations.css
Normal file
394
exercices/memory-pictogrammes/assets/css/animations.css
Normal file
@@ -0,0 +1,394 @@
|
||||
/* ============================================
|
||||
ANIMATIONS AVANCÉES - Memory Pictogrammes
|
||||
============================================ */
|
||||
|
||||
/* ============================================
|
||||
FADE ANIMATIONS
|
||||
============================================ */
|
||||
@keyframes fadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fadeInDown {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(-20px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fadeInUp {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(20px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
CARD ANIMATIONS
|
||||
============================================ */
|
||||
|
||||
/* Match Success - Explosion colorée */
|
||||
@keyframes matchSuccess {
|
||||
0% {
|
||||
transform: scale(1);
|
||||
filter: drop-shadow(0 0 0px rgba(76, 175, 80, 0.6));
|
||||
}
|
||||
50% {
|
||||
transform: scale(1.15) rotate(5deg);
|
||||
filter: drop-shadow(0 0 12px rgba(76, 175, 80, 0.8));
|
||||
}
|
||||
100% {
|
||||
transform: scale(1);
|
||||
filter: drop-shadow(0 0 0px rgba(76, 175, 80, 0));
|
||||
}
|
||||
}
|
||||
|
||||
/* Card Shake - Erreur */
|
||||
@keyframes cardShake {
|
||||
0%, 100% {
|
||||
transform: translateX(0) rotateZ(0deg);
|
||||
}
|
||||
10%, 30%, 50%, 70%, 90% {
|
||||
transform: translateX(-8px) rotateZ(-1deg);
|
||||
}
|
||||
20%, 40%, 60%, 80% {
|
||||
transform: translateX(8px) rotateZ(1deg);
|
||||
}
|
||||
}
|
||||
|
||||
/* Pop In - Apparition */
|
||||
@keyframes popIn {
|
||||
0% {
|
||||
transform: scale(0.5);
|
||||
opacity: 0;
|
||||
}
|
||||
50% {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
100% {
|
||||
transform: scale(1);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
/* Bounce - Rebond */
|
||||
@keyframes bounce {
|
||||
0%, 100% {
|
||||
transform: translateY(0);
|
||||
}
|
||||
50% {
|
||||
transform: translateY(-12px);
|
||||
}
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
PROGRESS BAR ANIMATIONS
|
||||
============================================ */
|
||||
|
||||
/* Pulse Progress Bar */
|
||||
@keyframes progressPulse {
|
||||
0%, 100% {
|
||||
box-shadow: 0 0 8px rgba(29, 158, 117, 0.4);
|
||||
}
|
||||
50% {
|
||||
box-shadow: 0 0 24px rgba(29, 158, 117, 0.8);
|
||||
}
|
||||
}
|
||||
|
||||
.progress-bar.pulse {
|
||||
animation: progressPulse 0.6s ease-out;
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
MODAL ANIMATIONS
|
||||
============================================ */
|
||||
|
||||
/* Slide Up */
|
||||
@keyframes slideUp {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(40px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
/* Fade In Modal Background */
|
||||
@keyframes fadeInBlur {
|
||||
from {
|
||||
opacity: 0;
|
||||
backdrop-filter: blur(0px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
backdrop-filter: blur(5px);
|
||||
}
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
FLOAT ANIMATION (Confettis)
|
||||
============================================ */
|
||||
@keyframes float {
|
||||
0%, 100% {
|
||||
transform: translateY(0px);
|
||||
}
|
||||
50% {
|
||||
transform: translateY(-12px);
|
||||
}
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
SCORE UPDATE ANIMATION
|
||||
============================================ */
|
||||
@keyframes scoreFlip {
|
||||
0% {
|
||||
transform: rotateX(90deg);
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
transform: rotateX(0deg);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
ACHIEVEMENT UNLOCK ANIMATION
|
||||
============================================ */
|
||||
@keyframes achievementUnlock {
|
||||
0% {
|
||||
transform: scale(0) rotateZ(-180deg);
|
||||
opacity: 0;
|
||||
}
|
||||
50% {
|
||||
transform: scale(1.15);
|
||||
}
|
||||
100% {
|
||||
transform: scale(1) rotateZ(0deg);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
STAT BOX ANIMATIONS
|
||||
============================================ */
|
||||
@keyframes statUpdate {
|
||||
0% {
|
||||
transform: scale(0.8);
|
||||
background: rgba(29, 158, 117, 0.2);
|
||||
}
|
||||
100% {
|
||||
transform: scale(1);
|
||||
background: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
TIMER ANIMATIONS
|
||||
============================================ */
|
||||
@keyframes timerTick {
|
||||
0% {
|
||||
transform: scale(1);
|
||||
}
|
||||
50% {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
100% {
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
/* Timer warning (< 30 seconds) */
|
||||
@keyframes timerWarning {
|
||||
0%, 100% {
|
||||
color: #FF9800;
|
||||
}
|
||||
50% {
|
||||
color: #D85A30;
|
||||
}
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
LEADERBOARD ANIMATIONS
|
||||
============================================ */
|
||||
|
||||
/* Rank item slide in */
|
||||
@keyframes rankSlideIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateX(-20px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
|
||||
.rank-item {
|
||||
animation: rankSlideIn 0.3s ease-out forwards;
|
||||
}
|
||||
|
||||
.rank-item:nth-child(1) { animation-delay: 0.1s; }
|
||||
.rank-item:nth-child(2) { animation-delay: 0.2s; }
|
||||
.rank-item:nth-child(3) { animation-delay: 0.3s; }
|
||||
.rank-item:nth-child(4) { animation-delay: 0.4s; }
|
||||
.rank-item:nth-child(5) { animation-delay: 0.5s; }
|
||||
|
||||
/* ============================================
|
||||
GLOW ANIMATIONS
|
||||
============================================ */
|
||||
|
||||
/* Card glow hover */
|
||||
@keyframes glowCard {
|
||||
0% {
|
||||
box-shadow: 0 0 0px rgba(29, 158, 117, 0);
|
||||
}
|
||||
100% {
|
||||
box-shadow: 0 0 16px rgba(29, 158, 117, 0.3);
|
||||
}
|
||||
}
|
||||
|
||||
/* Victory confetti animation */
|
||||
@keyframes confetti {
|
||||
0% {
|
||||
transform: translateY(-200px) rotateZ(0deg) scale(1);
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
transform: translateY(600px) rotateZ(720deg) scale(0);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
PULSING ANIMATIONS
|
||||
============================================ */
|
||||
|
||||
/* Pulse button */
|
||||
@keyframes buttonPulse {
|
||||
0%, 100% {
|
||||
box-shadow: 0 0 0px rgba(29, 158, 117, 0.7);
|
||||
}
|
||||
50% {
|
||||
box-shadow: 0 0 16px rgba(29, 158, 117, 0.4);
|
||||
}
|
||||
}
|
||||
|
||||
/* Loading spinner */
|
||||
@keyframes spin {
|
||||
from {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
FLIP ANIMATION (3D)
|
||||
============================================ */
|
||||
|
||||
@keyframes flip {
|
||||
0% {
|
||||
transform: rotateY(0deg);
|
||||
}
|
||||
100% {
|
||||
transform: rotateY(180deg);
|
||||
}
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
UTILITY ANIMATION CLASSES
|
||||
============================================ */
|
||||
|
||||
.animate-fade-in {
|
||||
animation: fadeIn 0.3s ease-out;
|
||||
}
|
||||
|
||||
.animate-slide-up {
|
||||
animation: slideUp 0.4s ease-out;
|
||||
}
|
||||
|
||||
.animate-pop {
|
||||
animation: popIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
|
||||
}
|
||||
|
||||
.animate-bounce {
|
||||
animation: bounce 0.6s ease-in-out;
|
||||
}
|
||||
|
||||
.animate-shake {
|
||||
animation: cardShake 0.4s ease-in-out;
|
||||
}
|
||||
|
||||
.animate-float {
|
||||
animation: float 1s ease-in-out infinite;
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
STAGGERED ANIMATIONS (pour listes)
|
||||
============================================ */
|
||||
|
||||
.stagger-children > * {
|
||||
animation: fadeInUp 0.6s ease-out forwards;
|
||||
}
|
||||
|
||||
.stagger-children > *:nth-child(1) { animation-delay: 0.1s; }
|
||||
.stagger-children > *:nth-child(2) { animation-delay: 0.2s; }
|
||||
.stagger-children > *:nth-child(3) { animation-delay: 0.3s; }
|
||||
.stagger-children > *:nth-child(4) { animation-delay: 0.4s; }
|
||||
.stagger-children > *:nth-child(5) { animation-delay: 0.5s; }
|
||||
.stagger-children > *:nth-child(6) { animation-delay: 0.6s; }
|
||||
|
||||
/* ============================================
|
||||
TRANSITIONS (mouvements fluides)
|
||||
============================================ */
|
||||
|
||||
button, a, .stat-box, .rank-item {
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
DARK MODE ANIMATIONS (optionnel)
|
||||
============================================ */
|
||||
@media (prefers-color-scheme: dark) {
|
||||
@keyframes fadeInDark {
|
||||
from {
|
||||
opacity: 0;
|
||||
filter: brightness(0.8);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
filter: brightness(1);
|
||||
}
|
||||
}
|
||||
|
||||
main {
|
||||
animation: fadeInDark 0.6s ease-out;
|
||||
}
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
MOTION PREFERENCE RESPECT
|
||||
============================================ */
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
* {
|
||||
animation-duration: 0.01ms !important;
|
||||
animation-iteration-count: 1 !important;
|
||||
transition-duration: 0.01ms !important;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user