body {
  background-color: #fff;
}

.clock{
	border-radius: 70px;
	border: 3px solid #252525;
	position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -50px;
  margin-top: -50px;
  display: block;
  width: 60px;
  height: 60px;
  border-color: #fff;  /* fallback for old browsers */
  border-color: #000;  /* fallback for old browsers */
  }

.clock:after{
	content: "";
	position: absolute;
	background: #fff;  /* fallback for old browsers */
	background: #000;  /* fallback for old browsers */
	top: 6px;
	left: 48%;
	height: 25px;
	width: 3px;
	border-radius: 5px;
	-webkit-transform-origin: 50% 97%;
			transform-origin: 50% 97%;
	-webkit-animation: grdAiguille 2s linear infinite;
			animation: grdAiguille 2s linear infinite;
}






@-webkit-keyframes grdAiguille{
    0%{-webkit-transform:rotate(0deg);}
    100%{-webkit-transform:rotate(360deg);}
}

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

.clock:before{
	content: "";
	position: absolute;
	background: #000;  /* fallback for old browsers */
	top: 12px;
	left: 48%;
	height: 20px;
	width: 3px;
	border-radius: 5px;
	-webkit-transform-origin: 50% 94%;
			transform-origin: 50% 94%;
	-webkit-animation: ptAiguille 12s linear infinite;
			animation: ptAiguille 12s linear infinite;
}

@-webkit-keyframes ptAiguille{
    0%{-webkit-transform:rotate(0deg);}
    100%{-webkit-transform:rotate(360deg);}
}

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