<div class="watch">
    <div class="watchFace">
        <div class="hour"></div>
        <div class="mins ticking"></div>
        <div class="secs ticking"></div>
    </div>
</div>

html	{
    height: 100% ;
    font-size: 100% ;
    }

body	{
    height: 100% ;
	background-color: #fff ;
    background: linear-gradient(to right, rgba(255,255,255,1) 0%, rgba(246,246,246,1) 47%, rgba(237,237,237,1) 100%) ;
	}

.watch    {
    width: 25rem ;
    height: 31.25rem ; /* watch proportion 1.25 */
    background: black ;
    border: 5px solid #9b9b9b ;
    box-shadow: 0 0 0 4px #000 ;
    position: absolute ;
    border-radius: 5rem ;
    overflow: hidden ;
    top: 50% ;
    left: 50% ;
    transform: translate(-50%,-50%) ;
    }
    .watch::before    {
        content:"" ;
        position: absolute ;
        top: 0 ;
        left: 5% ;
        background: #444 ;
        width: 90% ;
        height: 2.5rem ;
        border-radius: 0 0 5rem 5rem ;
        }

.watchFace    {
    width: 20rem ;
    height: 20rem ;
    background: #222 ;
    position: absolute ;
    top: 5.625rem ;
    left: 2.5rem ;
    border-radius: 100% ;
    transition: all .3s ;
    }
    .watchFace:hover  {
        transform: scale(1.1) ;
        filter: grayscale(100%) ;
        }

.watchFace div  {
    height: 40% ;
    position: absolute ;
    top: 10% ;
    left: 50% ;
    transform-origin: bottom ;
    }

.watchFace .hour   {
    width: .6rem ;
    margin-left: -.3rem ;
    height: 25% ;
    top: 25% ;
    z-index: 1 ;
    background-color: #fff ;
    transform: rotate(330deg) ;
    }
    .hour::after   {
        content: "" ;
        width: 2rem ;
        height: 2rem ;
        border-radius: 100% ;
        background-color: #fff ;
        position: absolute ;
        bottom: -1rem ;
        left: -.7rem ;
        }

.mins   {
    width: .4rem ;
    margin-left: -.2rem ;
    left: 50% ;
    z-index: 1 ;
    background-color: #dc143c ;
    border-radius: 0 0 .2rem .2rem ;
    animation: handsRotation 120s infinite linear ;
    animation-duration: 12s ; /* v = 10X */
    }
    .mins::before   {
        content: "" ;
        width: 1rem ;
        height: 1rem ;
        border-radius: 100% ;
        background-color: #dc143c ;
        position: absolute ;
        z-index: 1 ;
        bottom: -.5rem ;
        left: -.3rem ;
        }

.secs   {
    width: .25rem ;
    margin-left: -.12rem ;
    left: 50% ;
    background-color: #ffa500 ;
    animation: handsRotation 60s infinite steps(60,end) ;
    }
    .secs::after   {
        content: "" ;
        width: 1rem ;
        height: 1rem ;
        border-radius: 100% ;
        background-color: #ffa500 ;
        position: absolute ;
        top: -.62rem ;
        left:-.37rem ;
        }

@keyframes handsRotation {
    
    to  {
        transform: rotate(1turn)
        }
}

.watchFace:hover .ticking  {
	  animation-play-state: paused ;
    }

/* No JS at all ;) */