CSS Animation Clock Design Step by Step || Only HTML and CSS Animation Clock Design|| HTML & CSS



CSS Animation Clock Design Step by Step || Only HTML and CSS Animation Clock Design|| HTML & CSS please click this link:https://www.youtube.com/channel/UCAQx9-IHPi51bWzGRXCXe4w Youtube Channel Name: Eaayweb Coding pure css animation clock,css3 clock,css animation clock desing,only html and css,dark clock design using html and css,animation,clock,digital clock design using html and css,css analog clock,pure css clock,css rotate clock,only,css animation,digital clock,html tutorial,neumorph css,css clock,working analog clock,making a css analog clock,how to create analog clock using html css,html and css working clock,css animation tutorial,analog clock




 <div class='clock'>
  <div class='sh-0' id='second-hand'></div>
  <div class='mh-51' id='minute-hand'></div>
  <div class='hh-2' id='hour-hand'></div>
  <span class='ticks'>
    <span class='tick-1'></span>
    <span class='tick-2'></span>
    <span class='tick-3'></span>
    <span class='tick-4'></span>
    <span class='tick-5'></span>
    <span class='tick-6'></span>
    <span class='tick-7'></span>
    <span class='tick-8'></span>
    <span class='tick-9'></span>
    <span class='tick-10'></span>
    <span class='tick-11'></span>
    <span class='tick-12'></span>
    <span class='tick-13'></span>
    <span class='tick-14'></span>
    <span class='tick-15'></span>
    <span class='tick-16'></span>
    <span class='tick-17'></span>
    <span class='tick-18'></span>
    <span class='tick-19'></span>
    <span class='tick-20'></span>
    <span class='tick-21'></span>
    <span class='tick-22'></span>
    <span class='tick-23'></span>
    <span class='tick-24'></span>
    <span class='tick-25'></span>
    <span class='tick-26'></span>
    <span class='tick-27'></span>
    <span class='tick-28'></span>
    <span class='tick-29'></span>
    <span class='tick-30'></span>
    <span class='tick-31'></span>
    <span class='tick-32'></span>
    <span class='tick-33'></span>
    <span class='tick-34'></span>
    <span class='tick-35'></span>
    <span class='tick-36'></span>
    <span class='tick-37'></span>
    <span class='tick-38'></span>
    <span class='tick-39'></span>
    <span class='tick-40'></span>
    <span class='tick-41'></span>
    <span class='tick-42'></span>
    <span class='tick-43'></span>
    <span class='tick-44'></span>
    <span class='tick-45'></span>
    <span class='tick-46'></span>
    <span class='tick-47'></span>
    <span class='tick-48'></span>
    <span class='tick-49'></span>
    <span class='tick-50'></span>
    <span class='tick-51'></span>
    <span class='tick-52'></span>
    <span class='tick-53'></span>
    <span class='tick-54'></span>
    <span class='tick-55'></span>
    <span class='tick-56'></span>
    <span class='tick-57'></span>
    <span class='tick-58'></span>
    <span class='tick-59'></span>
    <span class='tick-60'></span>
  </span>
</div>                    
                  
                



 .clock {
  width: 260px;
  height: 260px;
  background: #222;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate3d(-50%, -50%, 0);
          transform: translate3d(-50%, -50%, 0);
}
.clock div {
  position: absolute;
  -webkit-transform-origin: 50% 0;
      -ms-transform-origin: 50% 0;
          transform-origin: 50% 0;
}
.clock::after {
  position: absolute;
  content: '';
  width: 12px;
  padding-bottom: 12px;
  background-color: white;
  border-radius: 50%;
  top: calc(50% - 6px);
  left: calc(50% - 6px);
  z-index: 999;
}
.clock #second-hand {
  height: 45%;
  top: 50%;
  left: calc(50% - 1px);
  z-index: 1;
  border-left: 1px solid white;
  border-right: 1px solid white;
  border-radius: 0 0 1px 1px;
}
.clock #minute-hand {
  height: 40%;
  top: 50%;
  left: calc(50% - 2px);
  z-index: 1;
  border-left: 2px solid white;
  border-right: 2px solid white;
  border-radius: 0 0 2px 2px;
}
.clock #hour-hand {
  height: 30%;
  top: 50%;
  left: calc(50% - 3px);
  z-index: 1;
  border-left: 3px solid white;
  border-right: 3px solid white;
  border-radius: 0 0 3px 3px;
}
.clock .ticks span {
  position: absolute;
  display: block;
  height: 2px;
  width: 12px;
  background: #444;
  -webkit-transform-origin: 50% 0%;
      -ms-transform-origin: 50% 0%;
          transform-origin: 50% 0%;
  left: calc(50% - 6px);
  top: 50%;
}
.clock .ticks span:nth-child(1) {
  -webkit-transform: rotate(6deg) translateX(118px);
      -ms-transform: rotate(6deg) translateX(118px);
          transform: rotate(6deg) translateX(118px);
}
.clock .ticks span:nth-child(2) {
  -webkit-transform: rotate(12deg) translateX(118px);
      -ms-transform: rotate(12deg) translateX(118px);
          transform: rotate(12deg) translateX(118px);
}
.clock .ticks span:nth-child(3) {
  -webkit-transform: rotate(18deg) translateX(118px);
      -ms-transform: rotate(18deg) translateX(118px);
          transform: rotate(18deg) translateX(118px);
}
.clock .ticks span:nth-child(4) {
  -webkit-transform: rotate(24deg) translateX(118px);
      -ms-transform: rotate(24deg) translateX(118px);
          transform: rotate(24deg) translateX(118px);
}
.clock .ticks span:nth-child(5) {
  -webkit-transform: rotate(30deg) translateX(118px);
      -ms-transform: rotate(30deg) translateX(118px);
          transform: rotate(30deg) translateX(118px);
  background: white;
}
.clock .ticks span:nth-child(6) {
  -webkit-transform: rotate(36deg) translateX(118px);
      -ms-transform: rotate(36deg) translateX(118px);
          transform: rotate(36deg) translateX(118px);
}
.clock .ticks span:nth-child(7) {
  -webkit-transform: rotate(42deg) translateX(118px);
      -ms-transform: rotate(42deg) translateX(118px);
          transform: rotate(42deg) translateX(118px);
}
.clock .ticks span:nth-child(8) {
  -webkit-transform: rotate(48deg) translateX(118px);
      -ms-transform: rotate(48deg) translateX(118px);
          transform: rotate(48deg) translateX(118px);
}
.clock .ticks span:nth-child(9) {
  -webkit-transform: rotate(54deg) translateX(118px);
      -ms-transform: rotate(54deg) translateX(118px);
          transform: rotate(54deg) translateX(118px);
}
.clock .ticks span:nth-child(10) {
  -webkit-transform: rotate(60deg) translateX(118px);
      -ms-transform: rotate(60deg) translateX(118px);
          transform: rotate(60deg) translateX(118px);
  background: white;
}
.clock .ticks span:nth-child(11) {
  -webkit-transform: rotate(66deg) translateX(118px);
      -ms-transform: rotate(66deg) translateX(118px);
          transform: rotate(66deg) translateX(118px);
}
.clock .ticks span:nth-child(12) {
  -webkit-transform: rotate(72deg) translateX(118px);
      -ms-transform: rotate(72deg) translateX(118px);
          transform: rotate(72deg) translateX(118px);
}
.clock .ticks span:nth-child(13) {
  -webkit-transform: rotate(78deg) translateX(118px);
      -ms-transform: rotate(78deg) translateX(118px);
          transform: rotate(78deg) translateX(118px);
}
.clock .ticks span:nth-child(14) {
  -webkit-transform: rotate(84deg) translateX(118px);
      -ms-transform: rotate(84deg) translateX(118px);
          transform: rotate(84deg) translateX(118px);
}
.clock .ticks span:nth-child(15) {
  -webkit-transform: rotate(90deg) translateX(118px);
      -ms-transform: rotate(90deg) translateX(118px);
          transform: rotate(90deg) translateX(118px);
  background: white;
}
.clock .ticks span:nth-child(16) {
  -webkit-transform: rotate(96deg) translateX(118px);
      -ms-transform: rotate(96deg) translateX(118px);
          transform: rotate(96deg) translateX(118px);
}
.clock .ticks span:nth-child(17) {
  -webkit-transform: rotate(102deg) translateX(118px);
      -ms-transform: rotate(102deg) translateX(118px);
          transform: rotate(102deg) translateX(118px);
}
.clock .ticks span:nth-child(18) {
  -webkit-transform: rotate(108deg) translateX(118px);
      -ms-transform: rotate(108deg) translateX(118px);
          transform: rotate(108deg) translateX(118px);
}
.clock .ticks span:nth-child(19) {
  -webkit-transform: rotate(114deg) translateX(118px);
      -ms-transform: rotate(114deg) translateX(118px);
          transform: rotate(114deg) translateX(118px);
}
.clock .ticks span:nth-child(20) {
  -webkit-transform: rotate(120deg) translateX(118px);
      -ms-transform: rotate(120deg) translateX(118px);
          transform: rotate(120deg) translateX(118px);
  background: white;
}
.clock .ticks span:nth-child(21) {
  -webkit-transform: rotate(126.0deg) translateX(118px);
      -ms-transform: rotate(126.0deg) translateX(118px);
          transform: rotate(126.0deg) translateX(118px);
}
.clock .ticks span:nth-child(22) {
  -webkit-transform: rotate(132deg) translateX(118px);
      -ms-transform: rotate(132deg) translateX(118px);
          transform: rotate(132deg) translateX(118px);
}
.clock .ticks span:nth-child(23) {
  -webkit-transform: rotate(138deg) translateX(118px);
      -ms-transform: rotate(138deg) translateX(118px);
          transform: rotate(138deg) translateX(118px);
}
.clock .ticks span:nth-child(24) {
  -webkit-transform: rotate(144deg) translateX(118px);
      -ms-transform: rotate(144deg) translateX(118px);
          transform: rotate(144deg) translateX(118px);
}
.clock .ticks span:nth-child(25) {
  -webkit-transform: rotate(150deg) translateX(118px);
      -ms-transform: rotate(150deg) translateX(118px);
          transform: rotate(150deg) translateX(118px);
  background: white;
}
.clock .ticks span:nth-child(26) {
  -webkit-transform: rotate(156deg) translateX(118px);
      -ms-transform: rotate(156deg) translateX(118px);
          transform: rotate(156deg) translateX(118px);
}
.clock .ticks span:nth-child(27) {
  -webkit-transform: rotate(162deg) translateX(118px);
      -ms-transform: rotate(162deg) translateX(118px);
          transform: rotate(162deg) translateX(118px);
}
.clock .ticks span:nth-child(28) {
  -webkit-transform: rotate(168deg) translateX(118px);
      -ms-transform: rotate(168deg) translateX(118px);
          transform: rotate(168deg) translateX(118px);
}
.clock .ticks span:nth-child(29) {
  -webkit-transform: rotate(174deg) translateX(118px);
      -ms-transform: rotate(174deg) translateX(118px);
          transform: rotate(174deg) translateX(118px);
}
.clock .ticks span:nth-child(30) {
  -webkit-transform: rotate(180deg) translateX(118px);
      -ms-transform: rotate(180deg) translateX(118px);
          transform: rotate(180deg) translateX(118px);
  background: white;
}
.clock .ticks span:nth-child(31) {
  -webkit-transform: rotate(186.0deg) translateX(118px);
      -ms-transform: rotate(186.0deg) translateX(118px);
          transform: rotate(186.0deg) translateX(118px);
}
.clock .ticks span:nth-child(32) {
  -webkit-transform: rotate(192deg) translateX(118px);
      -ms-transform: rotate(192deg) translateX(118px);
          transform: rotate(192deg) translateX(118px);
}
.clock .ticks span:nth-child(33) {
  -webkit-transform: rotate(198.0deg) translateX(118px);
      -ms-transform: rotate(198.0deg) translateX(118px);
          transform: rotate(198.0deg) translateX(118px);
}
.clock .ticks span:nth-child(34) {
  -webkit-transform: rotate(204deg) translateX(118px);
      -ms-transform: rotate(204deg) translateX(118px);
          transform: rotate(204deg) translateX(118px);
}
.clock .ticks span:nth-child(35) {
  -webkit-transform: rotate(210deg) translateX(118px);
      -ms-transform: rotate(210deg) translateX(118px);
          transform: rotate(210deg) translateX(118px);
  background: white;
}
.clock .ticks span:nth-child(36) {
  -webkit-transform: rotate(216deg) translateX(118px);
      -ms-transform: rotate(216deg) translateX(118px);
          transform: rotate(216deg) translateX(118px);
}
.clock .ticks span:nth-child(37) {
  -webkit-transform: rotate(222deg) translateX(118px);
      -ms-transform: rotate(222deg) translateX(118px);
          transform: rotate(222deg) translateX(118px);
}
.clock .ticks span:nth-child(38) {
  -webkit-transform: rotate(228deg) translateX(118px);
      -ms-transform: rotate(228deg) translateX(118px);
          transform: rotate(228deg) translateX(118px);
}
.clock .ticks span:nth-child(39) {
  -webkit-transform: rotate(234deg) translateX(118px);
      -ms-transform: rotate(234deg) translateX(118px);
          transform: rotate(234deg) translateX(118px);
}
.clock .ticks span:nth-child(40) {
  -webkit-transform: rotate(240deg) translateX(118px);
      -ms-transform: rotate(240deg) translateX(118px);
          transform: rotate(240deg) translateX(118px);
  background: white;
}
.clock .ticks span:nth-child(41) {
  -webkit-transform: rotate(246deg) translateX(118px);
      -ms-transform: rotate(246deg) translateX(118px);
          transform: rotate(246deg) translateX(118px);
}
.clock .ticks span:nth-child(42) {
  -webkit-transform: rotate(252.0deg) translateX(118px);
      -ms-transform: rotate(252.0deg) translateX(118px);
          transform: rotate(252.0deg) translateX(1                
              



// adding initial time classnames on load. css handles the timing.
var time = new Date(),
    hours = time.getHours(),
    minutes = time.getMinutes(),
    seconds = time.getSeconds();

document.getElementById("second-hand").className = "sh-" + seconds;
document.getElementById("minute-hand").className = "mh-" + minutes;
document.getElementById("hour-hand").className = "hh-" + hours;