.clock {
    background: url(../images/bg-horloge-vk.png) no-repeat center;
    background-size: 88%;
    height: 28rem;
    position: relative;
    width: 100%;
}
  
.clock:after {
    background: #358163;
    border-radius: 50%;
    content: "";
    position: absolute;
    left: 50%;
    top: 52%;
    transform: translate(-50%, -50%);
    width: 15px;
    height: 15px;
    z-index: 10;
    border: 4px solid #C6E7DD;
}
.minutes-container, .hours-container, .seconds-container {
    position: absolute;
    top: 4%;
    right: 0;
    bottom: 0;
    left: 0;
}
.hours {
    height: 12%;
    left: 49.3%;
    position: absolute;
    top: 38%;
    transform-origin: 50% 100%;
    width: 1.5%;
    background: #FF9900;
    border-radius: 4.27273px;
}

.minutes {
    height: 29%;
    left: 49.8%;
    position: absolute;
    top: 21%;
    transform-origin: 50% 100%;
    width: 4px;
    background: #C6E7DD;
    border-radius: 4.27273px;
}
.seconds {
    height: 32%;
    left: 49.5%;
    position: absolute;
    top: 24.5%;
    transform-origin: 50% 80%;
    width: 1.5px;
    z-index: 8;
    background: #95CEBD;
    border-radius: 4.27273px;
}

@keyframes rotate {
    100% {
        transform: rotateZ(360deg);
    }
}

.hours-container {
    animation: rotate 43200s infinite linear;
}
.minutes-container {
    animation: rotate 3600s infinite steps(60);
}
.seconds-container {
    animation: rotate 60s infinite steps(60);
}
/* .minutes-container {
    transition: transform 0.3s cubic-bezier(.4,2.08,.55,.44);
}
.seconds-container {
    transition: transform 0.2s cubic-bezier(.4,2.08,.55,.44);
} */