/*animation des  images de loisirs*/
.divphotoloisir{
    position: relative;
    animation-duration: 0.3s;
    animation-timing-function: ease-in-out;
    animation-name: anim-loisir-end;
    transform: scale(1.0);
}

.divphotoloisir:hover{
    animation-duration: 0.3s;
    animation-timing-function: ease-in-out;
    animation-name: anim-loisir-start;
    transform: scale(1.03);

}


@keyframes anim-loisir-start {
    from{
        transform: scale(1);
    }
    to{
        transform: scale(1.03);

    }
}
@keyframes anim-loisir-end {
    from{
        transform: scale(1.03);

    }
    to{
        transform: scale(1.0);

    }
}





/* animation texte des images des loisirs*/

.divphotoloisir h3 {
    font-size: 50px;
    animation: anim-text-opacity-end 0.5s 1;
    color: rgba(206,32,155,0);
}

.divphotoloisir:hover h3{
    animation: anim-text-opacity-start 0.5s 1;
    color: #c3deec;
}


@keyframes anim-text-opacity-start {
    0%{
        color: rgba(206,32,155,0);
    }
    100%{
        color: #c3deec;
    }
}

@keyframes anim-text-opacity-end {
    0%{
        color: #c3deec;
    }
    100%{
        color: rgba(206,32,155,0);
    }
}


.anim-background{

    animation: ease-in-out 15000ms infinite;
    animation-name: transition-background;
    background-color: rgba(55,55,55,0);

}

@keyframes transition-background {
    to{
        background-color: #373737;
    }
    20%{
        background-color: rgba(55,55,55,0);
    }
    80%{
        background-color: rgba(55,55,55,0);

    }
    from{
        background-color: #373737;
    }
}

/* Animation de la barre des technologie défilantes */
@keyframes animation-formation {
    from{
        right: 0;
    }
    to{
       right: 4090px;
    }

}
/* Animation de la barre des technologies défilantes inversée */
@keyframes animation-formation-inverse {
    from{
        right: 4090px;
    }
    to{
        right: 0px;
    }

}