/* Animation neige */
.i-large,
.i-medium,
.i-small {
pointer-events: none;
position: absolute;
top: 0;
left: 0;
bottom: 10px;
right: 0;
}
.i-large {
background: url(images/particules_large.png) repeat 0px 0px;
-webkit-animation: dropFlowParticles 4s linear infinite;
-o-animation: dropFlowParticles 4s linear infinite;
animation: dropFlowParticles 4s linear infinite;
}
.i-medium {
background: url(images/particules_medium.png) repeat 0px 0px;
-webkit-animation: dropFlowParticles 12s linear infinite;
-o-animation: dropFlowParticles 12s linear infinite;
animation: dropFlowParticles 12s linear infinite;
}
.i-small {
background: url(images/particules_small.png) repeat 0px 0px;
-webkit-animation: dropFlowParticles 27s linear infinite;
-o-animation: dropFlowParticles 27s linear infinite;
animation: dropFlowParticles 27s linear infinite;
}
@-webkit-keyframes dropFlowParticles {
from {
background-position: 0 0;
}
to {
background-position: 0 413px;
}
}
@keyframes dropFlowParticles {
from {
background-position: 0 0;
}
to {
background-position: 0 413px;
}
}
/* Fin Animation neige */
.pere_noel img {
opacity: 0; /* On démarre avec une opacité à 0 pour le Père Noël */
}
@keyframes pere_noel {
0% {
transform: translateX(-250px) scale(1) rotate(0deg);
opacity: 1;
}
35% {
transform: translate(-121px, 0px) scale(1) rotate(0deg);
opacity: 1;
}
70% {
transform: translate(158px, -50px) scale(0.3) rotate(-20deg);
opacity: 0;
}
100% {
opacity: 1;
transform: translateX(-250px) scale(1) rotate(0deg);
opacity: 0;
}
}
.pere_noel img {
animation-timing-function: ease-in-out;
animation: pere_noel 15s infinite; 
}