.competences{
    animation : slide-top linear;
    animation-timeline: view();
    animation-range-start: cover 0%;
    animation-range-end: cover 30%;
}

.service{
    animation : slide-top linear;
    animation-timeline: view();
    animation-range-start: cover 0%;
    animation-range-end: cover 30%;
}

.formulaire{
    animation : slide-left linear;
    animation-timeline: view();
    animation-range-start: cover 0%;
    animation-range-end: cover 30%;
}

.text-contact{
    animation : slide-right linear;
    animation-timeline: view();
    animation-range-start: cover 0%;
    animation-range-end: cover 30%;
}

@keyframes slide-top {
    from{
        transform : translateY(100%);
        opacity :0;
    }
    to{
        transform: translateY(0);
        opacity : 1;
    }
}

@keyframes slide-left {
    from{
        transform : translateX(100%);
        opacity :0;
    }
    to{
        transform: translateX(0);
        opacity : 1;
    }
}

@keyframes slide-right {
    from{
        transform : translateX(-100%);
        opacity :0;
    }
    to{
        transform: translateX(0%);
        opacity : 1;
    }
}