thomas-claireau/PHP-P6-Openclassrooms

.scroll {
    padding-top: 60px;
}
.scroll span {
    position: absolute;
    bottom: 60px;
    right: 60px;
    width: 24px;
    height: 24px;
    margin-left: -12px;
    border-left: 2.2px solid #fff;
    border-bottom: 2.2px solid #fff;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
    -webkit-animation: sdb04 2s infinite;
    animation: sdb04 2s infinite;
    box-sizing: border-box;
}
@-webkit-keyframes sdb04 {
    0% {
        -webkit-transform: rotate(-45deg) translate(0, 0);
    }
    20% {
        -webkit-transform: rotate(-45deg) translate(-10px, 10px);
    }
    40% {
        -webkit-transform: rotate(-45deg) translate(0, 0);
    }
}
@keyframes sdb04 {
    0% {
        transform: rotate(-45deg) translate(0, 0);
    }
    20% {
        transform: rotate(-45deg) translate(-10px, 10px);
    }
    40% {
        transform: rotate(-45deg) translate(0, 0);
    }
}

#figures {
    .scroll {
        span {
            border-left: 2.2px solid $grisFonce;
            border-bottom: 2.2px solid $grisFonce;
            -webkit-transform: rotate(134deg);
            transform: rotate(134deg);
            -webkit-animation: sdb05 2s infinite;
            animation: sdb05 2s infinite;
        }

        &.hide {
            display: none;
        }
    }
}

@-webkit-keyframes sdb05 {
    0% {
        -webkit-transform: rotate(134deg) translate(0, 0);
    }
    20% {
        -webkit-transform: rotate(134deg) translate(-10px, 10px);
    }
    40% {
        -webkit-transform: rotate(134deg) translate(0, 0);
    }
}
@keyframes sdb05 {
    0% {
        transform: rotate(134deg) translate(0, 0);
    }
    20% {
        transform: rotate(134deg) translate(-10px, 10px);
    }
    40% {
        transform: rotate(134deg) translate(0, 0);
    }
}