<html><head><meta name="color-scheme" content="light dark"></head><body><pre style="word-wrap: break-word; white-space: pre-wrap;">/*Animations images*/

/* DÃ©finition de l'animation code html  &lt;img src="votre-image.jpg" class="animated-image" alt="Image animÃ©e"&gt;
*/
@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.1); }
  100% { transform: scale(1); }
}

.animated-image {
  animation: pulse 2s infinite;
}
/* Animation au survol (hover)   &lt;img src="votre-image.jpg" class="image-hover" alt="Image animÃ©e"&gt;*/

.image-hover {
  transition: transform 0.3s ease;
}

.image-hover:hover {
  transform: rotate(15deg);
}

/*Animation avancÃ©e avec CSS    &lt;img src="votre-image.jpg" class="floating-image" alt="Image flottante"&gt; */

@keyframes float {
  0% { transform: translateY(0px); }
  50% { transform: translateY(-20px); }
  100% { transform: translateY(0px); }
}

.floating-image {
  animation: float 3s ease-in-out infinite;
}

/* Animation de rotation &lt;img src="image.jpg" class="rotate-animation" alt="Rotation"&gt;*/
@keyframes rotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.rotate-animation {
    animation: rotate 2s linear infinite;
}

/* Animation de fondu  &lt;img src="image.jpg" class="fade-animation" alt="Fondu"&gt;*/
@keyframes fade {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}

.fade-animation {
    animation: fade 3s ease-in-out infinite;
}

/* Animation de rebond   &lt;img src="image.jpg" class="bounce-animation" alt="Rebond"&gt;*/
@keyframes bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-20px); }
}

.bounce-animation {
    animation: bounce 2s ease infinite;
}



/* Effet de pulsation   &lt;img src="image.jpg" class="pulse-animation" alt="Pulsation"&gt;*/
@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}

.pulse-animation {
    animation: pulse 2s ease infinite;
}

/* DÃ©placement latÃ©ral   &lt;img src="image.jpg" class="slide-animation" alt="DÃ©placement"&gt;*/
@keyframes slide {
    0% { transform: translateX(0); }
    50% { transform: translateX(50px); }
    100% { transform: translateX(0); }
}

.slide-animation {
    animation: slide 3s ease-in-out infinite;
}

/* Effet de flottement &lt;img src="image.jpg" class="float-animation" alt="Flottement"&gt;*/
@keyframes float {
    0% { transform: translateY(0px) rotate(0deg); }
    50% { transform: translateY(-20px) rotate(5deg); }
    100% { transform: translateY(0px) rotate(0deg); }
}

.float-animation {
    animation: float 4s ease-in-out infinite;
}

/* Animation au survol   &lt;img src="image.jpg" class="hover-grow" alt="Agrandissement au survol"&gt;*/
.hover-grow {
    transition: transform 0.3s ease;
}

.hover-grow:hover {
    transform: scale(1.1);
}

/* Animation de secousse &lt;img src="image.jpg" class="shake-animation" alt="Secousse"&gt;*/
@keyframes shake {
    0%, 100% { transform: translateX(0); }
    20%, 60% { transform: translateX(-10px); }
    40%, 80% { transform: translateX(10px); }
}

.shake-animation:hover {
    animation: shake 0.5s ease;
}

/*Fondu simple (fade-in)  &lt;img src="votre-image.jpg" class="fade-in" alt="Image qui apparaÃ®t"&gt; */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.fade-in {
  animation: fadeIn 1.5s ease-in forwards;
}

/*  Apparition avec zoom    */

@keyframes zoomIn {
  from {
    opacity: 0;
    transform: scale(0.5);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.zoom-in {
  animation: zoomIn 1s ease-out forwards;
}

/* Apparition depuis un cÃ´tÃ©   */

@keyframes slideInFromLeft {
  from {
    opacity: 0;
    transform: translateX(-100px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.slide-in-left {
  animation: slideInFromLeft 1s ease-out forwards;
}


/*apparition avec delai   */

.delayed-appearance {
  opacity: 0;
  animation: fadeIn 1s ease-in forwards;
  animation-delay: 0.5s; /* DÃ©lai de 0.5 seconde */
}
/* Apparition sÃ©quentielle de plusieurs images  code html  &lt;div class="reveal-sequence"&gt;
  &lt;img src="image1.jpg" alt="Image 1"&gt;
  &lt;img src="image2.jpg" alt="Image 2"&gt;
  &lt;img src="image3.jpg" alt="Image 3"&gt;
&lt;/div&gt;  */

.reveal-sequence img {
  opacity: 0;
  animation: fadeIn 0.5s ease-in forwards;
}

.reveal-sequence img:nth-child(1) { animation-delay: 0.3s; }
.reveal-sequence img:nth-child(2) { animation-delay: 0.6s; }
.reveal-sequence img:nth-child(3) { animation-delay: 0.9s; }

/*  Effet "Pop" au survol (CSS seul)   code html  &lt;img src="votre-image.jpg" class="pop-image" alt="Exemple"&gt; */

.pop-image {
    transition: transform 0.3s ease; /* Animation fluide */
    cursor: pointer; /* Change le curseur */
}

.pop-image:hover {
    transform: scale(1.05); /* Agrandit l'image de 5% */
    /* Optionnel : ajouter une ombre pour plus d'effet */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

/* Effet "Pop" avec animation CSS
Pour un effet plus dynamique (ex : rebond ou pulse) :*/

@keyframes pop {
    0% { transform: scale(1); }
    50% { transform: scale(1.1); }
    100% { transform: scale(1); }
}

.pop-image:hover {
    animation: pop 0.4s ease;
}

/*a mettre dans le head de toutes les pages &lt;link rel="stylesheet" href="animations.css"&gt;*/




/*fin animations images*/</pre></body></html>