* {
    margin: 0;
    padding: 0;
}

html,
body {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
}

.clock-wrap {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 400px;
    height: 400px;
    border: 1px solid #aaa;
}

.clock {
    position: relative;
    width: 300px;
    height: 300px;
    border: 1px solid #000;
    border-radius: 50%;
}

.hand {
    position: absolute;
    top: 50%;
    left: 50%;
    height: 0;
    transform-origin: left;
}

.second-hand {
    width: 120px;
    border: 1px solid red;
    /* animation: second-hand 60s linear  infinite; */
    animation: second-hand2 60s steps(60) infinite;
}

@keyframes second-hand2 {
    from {
        transform: rotate(-90deg);
    }
    to {
        transform: rotate(270deg);
    }
}

@keyframes second-hand {
    0% {
        transform: rotate(-90deg);
    }
    100% {
        transform: rotate(270deg);
    }
}

.minute-hand {
    width: 100px;
    border: 1px solid yellow;
    animation: minute-hand 3600s linear infinite;
}

@keyframes minute-hand {
    0% {
        transform: rotate(-90deg);
    }
    100% {
        transform: rotate(270deg);
    }
}

.hour-hand {
    width: 75px;
    border: 1px solid blue;
    animation: hour-hand 86400s linear infinite;
}
@keyframes hour-hand {
    0% {
        transform: rotate(-90deg);
    }
    100% {
        transform: rotate(270deg);
    }
}