Using animation steps attribute in CSS3 to realize the effect of pointer clock

The animation default is a ease transition, which inserts a motion tween between each keyframe, so the animation effect is consistent. In addition to ease, a transition function such as linear, cubic-bezier inserts a tween. But some effects do not need to tween, only need to jump between keyframes, at this time should use the steps transition mode, and the clock tick rotation, you should use this method.
Clock animation analysis

The animation effect of the clock is actually only one kind, is the pointer rotation.

The circle is 360deg, the second hand rotates 6deg every minute, the minute hand rotates 6deg every 60 seconds, the clockwise rotates 6deg every 3,600 seconds.

Therefore, the animation effect we need to achieve is:

Second hand rotates 360deg,60 seconds a cycle, infinite loop animation

The minute hand rotates 360deg,3600 seconds a cycle, infinite loop animation

Clockwise rotation 360deg:216000 seconds a cycle, infinite loop animation

The ticking effect of the clock rotation, you do not need to tween, you should use steps to transition (the animation will rotate 360deg)

Because the second hand, the minute hand and the step of the hour are all 6deg, so you can divide 360deg into 60 steps to complete steps

Pointer rotation 360deg animation definition

@keyframes Tick-tock {
    to {
        transform:rotate (360DEG);
   }
}
@-webkit-keyframes tick-tock {
    to {
        Transform:rotate (360deg) translate3d (0, 0, 0);
   }
}
Adds the CSS3 style-webkit-transform:transition3d (0,0,0) or-webkit-transform:translatez (0) for the animated DOM element. Both of these properties turn on GPU hardware acceleration mode, allowing the browser to turn from CPU to GPU when rendering animations, which is a small trick, or a hack,-webkit-transform:transition3d and- Webkit-transform:translatez is actually to render the 3D style, but we set a value of 0, and did not really use the 3D effect, but the browser turned on the GPU hardware acceleration mode.
bind pointer to rotate animation

* * seconds
-webkit-animation:tick-tock 60s Steps (the end) infinite;
Animation:tick-tock 60s Steps (the end) infinite;
* * The minute hand *
-webkit-animation:tick-tock 3600s Steps (the end) infinite;
Animation:tick-tock 3600s Steps (the end) infinite;
* * Hour
-webkit-animation:tick-tock 216000s Steps (the end) infinite;
Animation:tick-tock 216000s Steps (the end) infinite;
Comprehensive example

HTML Code
<div class= "Clock" >
<!--clock tick line-->
<div class= "line" ></div>
<div class= "line line1" ></div>
<div class= "line Line2" ></div>
<div class= "line Line3" ></div>
<div class= "line Line4" ></div>
<div class= "line Line5" ></div>
<div class= "line Line6" ></div>
<!--internal Bai and lines to form the scale-->
<div class= "White_circle" ></div>
<!--clock Center dot-->
<div class= "Black_circle" ></div>
<div class= "Hour" ></div>
<div class= "Minute" ></div>
<div class= "Second" ></div>
</div>
CSS Code
. Clock {
position:relative;
width:150px;
height:150px;
margin:50px Auto;
border:10px solid black;
border-radius:50%;
}
. Line {
Position:absolute;
left:50%;
Margin-left: -3px;
width:6px;
height:150px;
Background-color:gray;
}
. line1 {
-webkit-transform:rotate (30DEG);
Transform:rotate (30DEG);
}
. line2 {
-webkit-transform:rotate ( -30DEG);
Transform:rotate ( -30DEG);
}
. line3 {
-webkit-transform:rotate (60DEG);
Transform:rotate (60DEG);
}
. line4 {
-webkit-transform:rotate ( -60DEG);
Transform:rotate ( -60DEG);
}
. line5 {
-webkit-transform:rotate (30DEG);
Transform:rotate (30DEG);
}
. line6 {
-webkit-transform:rotate (90DEG);
Transform:rotate (90DEG);
}
Line1, Line2,. Line3,. Line4,. Line5 {
width:2px;
Margin-left: -1px;
}
. white_circle {
Position:absolute;
left:50%;
top:50%;
Margin: -60px 0 0-60px;
width:120px;
height:120px;
border-radius:50%;
Background-color: #fff;
}
. black_circle {
Position:absolute;
left:50%;
top:50%;
Margin: -8px 0 0-8px;
width:16px;
height:16px;
border-radius:50%;
Background-color: #000;
Z-index:1;
}
. hour {
Position:absolute;
top:50%;
right:50%;
width:35px;
height:6px;
Margin-top: -3px;
Background-color: #000;
border-radius:5px;
-webkit-transform-origin:right;
Transform-origin:right;
-webkit-animation:tick-tock 216000s Steps (the end) infinite;
Animation:tick-tock 216000s Steps (the end) infinite;
}
. minute {
Position:absolute;
top:50%;
left:50%;
width:6px;
height:46px;
Margin: -46px 0 0-3px;
Background-color: #000;
border-radius:5px;
-webkit-transform-origin:bottom;
Transform-origin:bottom;
-webkit-animation:tick-tock 3600s Steps (the end) infinite;
Animation:tick-tock 3600s Steps (the end) infinite;
}
. Second {
Position:absolute;
left:50%;
top:50%;
width:2px;
height:50px;
Margin: -50px 0 0-1px;
background-color:red;
border-radius:5px;
-webkit-transform-origin:bottom;
Transform-origin:bottom;
-webkit-animation:tick-tock 60s Steps (the end) infinite;
Animation:tick-tock 60s Steps (the end) infinite;
}
@keyframes Tick-tock {
to {
Transform:rotate (360DEG);
}
}
@-webkit-keyframes Tick-tock {
to {
Transform:rotate (360deg) translate3d (0, 0, 0);
}
}
Results diagram