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

@keyframes swing {
	0% {transform: rotate(30deg);}
	100% {transform: rotate(-30deg);}
}

.clockbox {
	border-radius: 0;
	position: absolute;/*relative absolute static fixed*/
	/*left right top bottom*/
	left: 100px;
	top: 100px;
}
.clockera {
	position: relative;
	width: 222px;
	height:378px;
}

.clock {
	width: 554px;
	hight: 945px;
	position: relative;
	transform-origin: 0% 0%;
	transform: scale(.4);
}

.clock * {
	position: absolute;
}

.pendulum {
	left: 194px;
	top: 420px;
	transform-origin: 50% 0%;
	/*transform: rotate(30deg);*/
	animation: swing 1s ease-in-out infinite alternate both;
	/*eelnev on samas järjekorras nagu clockhandi käsud; samas delay osa on vahele jäetud ja see ei sega; runningut ei pea kirjutama, kuna töötab pendel koguaeg, mitte ei ole vahepeal paigal*/
}

.clockface {
	width: 369px;
	hight: 369px;
	left: 92px;
	top: 88px;
}


.clockhand {
	top: 10px;
	left: 158px;
	transform-origin: 50% 177px;
	/*animation-name: spin;
	animation-duration: 3s;
	animation-timing-function: linear;
	animation-delay: 0s;
	animation-iteration-count: infinite;
	animation-direction: normal;
	animation-fill-mode: both;
	animation-play-state: running;*/
}

.minutehand {
	animation-duration: 60s;
}

.hourhand {
	animation-duration: 720s;
}

.secondhand {
	animation-duration: 10s;
}