<div id="clockBody"> <div id="clockDial"> <div id="hourHand"></div> <div id="minuteHand"></div> </div> <div id="pendulum"></div> </div>
@-webkit-keyframes minuteTick{ from {-webkit-transform:rotate(0deg)} to { -webkit-transform:rotate(360deg)} } @-moz-keyframes minuteTick{ from{ -moz-transform:rotate(0deg)} to{ -moz-transform:rotate(360deg)} } @-webkit-keyframes hourTick{ from {-webkit-transform:rotate(0deg)} to { -webkit-transform:rotate(360deg)} } @-moz-keyframes hourTick{ from{ -moz-transform:rotate(0deg)} to{ -moz-transform:rotate(360deg)} } @-webkit-keyframes swingTick{ 0% {-webkit-transform:rotate(15deg) } 50% { -webkit-transform:rotate(-15deg) } 100% { -webkit-transform:rotate(15deg)} } @-moz-keyframes swingTick{ from{ -moz-transform:rotate(0deg)} to{ -moz-transform:rotate(360deg)} } #clockBody{ width: 200px; height: 700px; border: 2px solid saddlebrown; background-color: sandybrown; padding-top: 50px; } #clockDial{ width: 180px; height: 180px; border-radius: 90px; background-color: ivory; border: 1px solid orange; margin: 0 auto; } #hourHand{ width: 8px; height: 40px; background-color: #222; position: absolute; left: 110px; top: 155px; -webkit-transform-origin: 4px 0px; -moz-transform-origin: 4px 0px; -moz-animation-timing-function: linear; -webkit-animation-timing-function:linear; -webkit-animation-iteration-count: infinite; -moz-animation-iteration-count: infinite; -webkit-animation-name: hourTick; -moz-animation-name: hourTick; -webkit-animation-duration: 600s; -moz-animation-duration: 600s; } #minuteHand{ width: 5px; height: 60px; background-color: #222; position: absolute; left: 110px; top: 155px; -webkit-transform-origin: 2px 0px; -moz-transform-origin: 2px 0px; -moz-animation-timing-function: linear; -webkit-animation-timing-function:linear; -webkit-animation-iteration-count: infinite; -moz-animation-iteration-count: infinite; -webkit-animation-name: minuteTick; -moz-animation-name: minuteTick; -webkit-animation-duration: 60s; -moz-animation-duration: 60s; } #pendulum{ width: 9px; height: 220px; background-color: #555; position: absolute; left: 110px; -webkit-transform-origin: 4px 0px; -moz-transform-origin: 0px 0px; -moz-animation-timing-function: ease-in-out; -webkit-animation-timing-function: ease-in-out; -webkit-animation-iteration-count: infinite; -webkit-animation-name: swingTick; -moz-animation-name: swingTick; -webkit-animation-duration: 2s; -moz-animation-duration: 2s; }