.clock {
    font-size: 100%;
    width: 8em;
    height: 8em;
    background: transparent;
    border: 8px solid #b3b3b3;
    border-radius: 50%;
    position: relative;
    margin: 0 auto;
}

    .clock:after, .clock:before {
        position: absolute;
        content: '';
        background: #999;
        border-radius: 50%;
    }

    .clock:after {
        width: 4em;
        height: 0.5em;
        top: 4em;
        left: 3.8em;
        transform-origin: .1em .1em;
        animation: minutehand .75s linear infinite;
    }

    .clock:before {
        width: 3.3em;
        height: 0.2em;
        top: 4em;
        left: 3.7em;
        transform-origin: .1em .1em;
        animation: hourhand 6s linear infinite;
    }

@keyframes minutehand {
    0% {
        transform: rotate(0deg)
    }

    100% {
        transform: rotate(360deg)
    }
}

@keyframes hourhand {
    0% {
        transform: rotate(0deg)
    }

    100% {
        transform: rotate(360deg)
    }
}