/* ici, tout le contenu de la balise body est affecté */
body {
    background: rgba(220, 220, 220, 1);
}
#titre {
    position: relative;
    top: -200px;
    text-align: center;
    color: blue;
    animation: translation_titre 10s linear infinite;
    z-index: 100;
}
img {
    border-radius: 5px;
}
/* Une classe pour définir la largeur et la hauteur initiale des images. */
.image {
    position: fixed;
    top: -200px;
    width: 250px;
}
/* Des classe pour définir l'abscisse initiale des images. */
.point_de_depart_1 { top: -200px; left: 20%; }
.point_de_depart_2 { top: -250px; left: 40%; }
.point_de_depart_3 { top: -200px; left: 60%; }

/* Animations */
@keyframes translation_titre { 50% {transform: translate(450px, 1000px) rotate(120deg) ;} }

.animation_1 { animation: translation_1 5s linear infinite; }
@keyframes translation_1 { 100% {transform: translate3d(500px, 1000px, -5000px);} }

.animation_2 { animation: translation_2 18s linear infinite; }
@keyframes translation_2 { 100% {transform: translate(400px, 1000px);} }

.animation_3 { animation: translation_3 17s linear infinite;}
@keyframes translation_3 { 100% { transform: translate(-900px, 1000px) rotate(720deg);} }

.animation_4 { animation: translation_4 16s linear infinite;}
@keyframes translation_4 { 100% { transform: translate(-800px, 1000px) rotate(720deg);} }

.animation_5 { animation: translation_5 15s linear infinite;}
@keyframes translation_5 { 100% { transform: translate(-700px, 1000px) rotate(720deg);} }

.animation_6 { animation: translation_6 14s linear infinite;}
@keyframes translation_6 { 100% { transform: translate(-600px, 1000px) rotate(720deg);} }

.animation_7 { animation: translation_7 13s linear infinite;}
@keyframes translation_7 { 100% { transform: translate(-500px, 1000px) rotate(720deg);} }

.animation_8 { animation: translation_8 12s linear infinite;}
@keyframes translation_8 { 100% { transform: translate(900px, 1000px) rotate(20deg);} }

.animation_9 { animation: translation_9 11s linear infinite;}
@keyframes translation_9 { 100% { transform: translate(800px, 1000px) rotate(720deg);} }

.animation_10 { animation: translation_10 10s linear infinite;}
@keyframes translation_10 { 100% { transform: translate(700px, 1000px) rotate(20deg);} }

.animation_11 { animation: translation_11 9s linear infinite;}
@keyframes translation_11 { 100% { transform: translate(600px, 1000px) rotate(720deg);} }

.animation_12 { animation: translation_12 8s linear infinite;}
@keyframes translation_12 { 100% { transform: translate(500px, 1000px) rotate(720deg);} }

.animation_13 { animation: translation_13 7s linear infinite;}
@keyframes translation_13 { 100% { transform: translate(400px, 1000px) rotate(20deg);} }

.animation_14 { animation: translation_14 6s linear infinite;}
@keyframes translation_14 { 100% { transform: translate(300px, 1000px) rotate(720deg);} }

.animation_15 { animation: translation_15 5s linear infinite;}
@keyframes translation_15 { 100% { transform: translate(200px, 1000px) rotate(20deg);} }

.animation_flocon { animation: translation_flocon 20s linear infinite;}
@keyframes translation_flocon { 100% { transform: translate(200px, 1000px) rotate(-270deg);} }