https://jsfiddle.net/vw5cm842/1/ Simple analog clock on pure css, without pictures. Adding the transition: transform 250ms cubic-bezier(.5, -1, .5, 2); rule to the second hand transition: transform 250ms cubic-bezier(.5, -1, .5, 2); causes a sharp jerk of the second hand a full turn when passing the zero mark (vertically up). What is the reason for this behavior and how to get rid of it?

 <div id="container" style="background: red; width:60%"> <div class="clock-wrap"> <section> <div class="display"></div> <div class="hourhand-container"> <div class="hourhand"></div> </div> <div class="minutehand-container"> <div class="minutehand"></div> </div> <div class="secondhand-container"> <div class="secondhand"></div> </div> <div class="center-dot"></div> <div class="hour12"></div> <div class="hour1"></div> <div class="hour2"></div> <div class="hour3"></div> <div class="hour4"></div> <div class="hour5"></div> </section> </div> </div> Styles .clock-wrap { overflow: hidden; position: relative; width: 100%; padding-bottom: 100%; } section { width: 100%; height: 100%; background: #000; border-radius: 50%; position: absolute; z-index: 1; } .label { position: absolute; top: 19vmin; left: 46%; font-size: 2.5vmin; } .hourhand, .secondhand, .minutehand { height: 100%; background: #000; z-index: 2; } .hourhand:after, .secondhand:after, .minutehand:after { content: ''; background: #000; width: 20%; height: 100%; z-index: 3; position: absolute; top: 0; left: -20%; } .hourhand-container { width: 100%; height: 2%; position: absolute; top: 49%; } .hourhand { border-top-right-radius: 20%; border-bottom-right-radius: 20%; box-shadow: -10px 0px 10px rgba(0,0,0,.4); width:30%; left: 50%; position: relative; z-index: 2; } .minutehand-container { width: 100%; height: 2%; position: absolute; top: 49%; } .minutehand { width: 40%; height: 100%; top: 0%; border-top-right-radius: 30%; border-bottom-right-radius: 30%; box-shadow: -10px 10px 10px rgba(0,0,0,.4); left: 50%; position: relative; z-index: 3; } .secondhand-container { width: 100%; height: 2%; position: absolute; top: 49%; } .secondhand { width: 45%; height: 40%; top: 30%; box-shadow: -10px -10px 10px rgba(0,0,0,.4); position: relative; left: 50%; z-index: 4; } .hour12, .hour1, .hour2, .hour3, .hour4, .hour5 { width: 90%; height: 1%; top: 49.5%; position: absolute; left: 5%; } .hour12:after, .hour1:after, .hour2:after, .hour3:after, .hour4:after, .hour5:after { content: ""; width: 8%; background: black; height: 100%; position: absolute; left: 0; } .hour12:before, .hour1:before, .hour2:before, .hour3:before, .hour4:before, .hour5:before { content: ""; width: 8%; background: black; height: 100%; position: absolute; right: 0; } .hour3 { transform: rotate(90deg); } .hour1 { transform: rotate(120deg); } .hour2 { transform: rotate(150deg); } .hour4 { transform: rotate(210deg); } .hour5 { transform: rotate(240deg); } .display { background: #fff; height: 95%; width: 95%; border-radius: 50%; position: absolute; left: 2.5%; top: 2.5%; box-shadow: inset 40px 40px 90px rgba(0,0,0,.2), inset 10px 10px 30px rgba(0,0,0,.5); } .secondhand-container { transition: transform 250ms cubic-bezier(.5, -1, .5, 2); } .center-dot { border-radius: 50%; background: #352f2f; top: 47.5%; left: 47.5%; width: 5%; height: 5%; position: relative; } Script const hourhand = $(".hourhand-container"); const minutehand = $(".minutehand-container"); const secondhand = $(".secondhand-container"); function tick() { var date = new Date(); var seconds = date.getSeconds(); var minutes = date.getMinutes(); var hours = date.getHours(); var secAngle = seconds * 6 - 90; var minAngle = minutes * 6 + seconds * (360/3600) - 90; var hourAngle = hours * 30 + minutes * (360/720) - 90; secondhand.css('transform', 'rotate(' + secAngle + 'deg)'); minutehand.css('transform', 'rotate(' + minAngle + 'deg)'); hourhand.css('transform', 'rotate(' + hourAngle + 'deg)'); } setInterval(tick, 1000);
  • Cut everything out of the code that does not concern the problem with the second hand, and place the remaining code directly into the text of the question without references to third-party resources - andreymal
  • Still, all the excess from the code is better to cut. The hour and minute hands and the background design do not have a relation to the problem and make it difficult to understand - andreymal
  • Well, the problem itself is obvious: the second hand from the position of 264 degrees moves to the position of -90 degrees, and for this you need to scroll 354 degrees AGAINST the hour hand - andreymal
  • Well, it was necessary to write in response, thank you, in this case, you must initially place the arrows vertically - Alaksander

0