body{
    background-size: 200px;
        background-repeat: repeat;
        background-image:
          url(clock.png);
      }
.hand{
    height: 80px;
    position: absolute;
    left: 45px;
    top:30px;
    transform-origin: 50% 89%;
    animation: hand 2s linear infinite;
}

.hand1{
    height: 80px;
    position: absolute;
    left: 245px;
    top:30px;
    transform-origin: 50% 89%;
    animation: hand 6s alternate infinite;
}

.hand2{
    height: 80px;
    position: absolute;
    left: 445px;
    top:30px;
    transform-origin: 50% 89%;
    animation: hand 4s linear infinite;
}

.hand3{
    height: 80px;
    position: absolute;
    left: 645px;
    top:30px;
    transform-origin: 50% 89%;
    animation: hand 4s linear infinite;
}

.hand4{
    height: 80px;
    position: absolute;
    left: 845px;
    top:30px;
    transform-origin: 50% 89%;
    animation: hand 9s alternate infinite;
}

.hand5{
    height: 80px;
    position: absolute;
    left: 1045px;
    top:30px;
    transform-origin: 50% 89%;
    animation: hand 2s linear infinite;
}

.hand6{
    height: 80px;
    position: absolute;
    left: 1245px;
    top:30px;
    transform-origin: 50% 89%;
    animation: hand 4s alternate infinite;
}

.hand0{
    height: 80px;
    position: absolute;
    left: 45px;
    top:230px;
    transform-origin: 50% 89%;
    animation: hand 4s linear infinite;
}

.hand10{
    height: 80px;
    position: absolute;
    left: 245px;
    top:230px;
    transform-origin: 50% 89%;
    animation: hand 20s alternate infinite;
}

.hand20{
    height: 80px;
    position: absolute;
    left: 445px;
    top:230px;
    transform-origin: 50% 89%;
    animation: hand 4s linear infinite;
}

.hand30{
    height: 80px;
    position: absolute;
    left: 645px;
    top:230px;
    transform-origin: 50% 89%;
    animation: hand 4s alternate infinite;
}

.hand40{
    height: 80px;
    position: absolute;
    left: 845px;
    top:230px;
    transform-origin: 50% 89%;
    animation: hand 4s linear infinite;
}

.hand50{
    height: 80px;
    position: absolute;
    left: 1045px;
    top:230px;
    transform-origin: 50% 89%;
    animation: hand 8s linear infinite;
}

.hand60{
    height: 80px;
    position: absolute;
    left: 1245px;
    top:230px;
    transform-origin: 50% 89%;
    animation: hand 2s linear infinite;
}

.hand00{
    height: 80px;
    position: absolute;
    left: 45px;
    top:450px;
    transform-origin: 50% 89%;
    animation: hand 8s linear infinite;
}

.hand11{
    height: 80px;
    position: absolute;
    left: 245px;
    top:450px;
    transform-origin: 50% 89%;
    animation: hand 8s alternate infinite;
}

.hand22{
    height: 80px;
    position: absolute;
    left: 445px;
    top:450px;
    transform-origin: 50% 89%;
    animation: hand 2s linear infinite;
}

.hand33{
    height: 80px;
    position: absolute;
    left: 645px;
    top:450px;
    transform-origin: 50% 89%;
    animation: hand 4s linear infinite;
}

.hand44{
    height: 80px;
    position: absolute;
    left: 845px;
    top:450px;
    transform-origin: 50% 89%;
    animation: hand 4s alternate-reverse infinite;
}

.hand55{
    height: 80px;
    position: absolute;
    left: 1045px;
    top:450px;
    transform-origin: 50% 89%;
    animation: hand 4s linear infinite;
}

.hand66{
    height: 80px;
    position: absolute;
    left: 1245px;
    top:450px;
    transform-origin: 50% 89%;
    animation: hand 4s linear infinite;
}

.hand000{
    height: 80px;
    position: absolute;
    left: 45px;
    top:650px;
    transform-origin: 50% 89%;
    animation: hand 2s linear infinite;
}

.hand111{
    height: 80px;
    position: absolute;
    left: 245px;
    top:650px;
    transform-origin: 50% 89%;
    animation: hand 4s linear infinite;
}

.hand222{
    height: 80px;
    position: absolute;
    left: 445px;
    top:650px;
    transform-origin: 50% 89%;
    animation: hand 10s linear infinite;
}

.hand333{
    height: 80px;
    position: absolute;
    left: 645px;
    top:650px;
    transform-origin: 50% 89%;
    animation: hand 3s alternate infinite;
}

.hand444{
    height: 80px;
    position: absolute;
    left: 845px;
    top:650px;
    transform-origin: 50% 89%;
    animation: hand 6s linear infinite;
}

.hand555{
    height: 80px;
    position: absolute;
    left: 1045px;
    top:650px;
    transform-origin: 50% 89%;
    animation: hand 4s alternate infinite;
}

.hand666{
    height: 80px;
    position: absolute;
    left: 1245px;
    top:650px;
    transform-origin: 50% 89%;
    animation: hand 2s linear infinite;
}

@keyframes hand{
 from { 
        transform: rotate(0deg) 
    }
        to { transform: rotate(360deg)}
    }

}