Pure css to implement Apple watch face animation_html/css_WEB-ITnose

Welcome to our blog: http://www.w3ctrain.com/2015/07/06/Apple-Watch-Dials/

With the mass production of Apple watches , I think it’s time to use CSS to implement dial-up animation.

In this article, we will use keyframe animation and a few tricks to animate the progress bar of the Apple watch face.

Demo

This is the final effect as follows:

See the Pen Apple Watch Activity Dials CSS by Helkyle (@HelKyle) on CodePen.

Dial Progress Bar

The animation of the table is composed of 3 lines, each of which is a progress bar. The progress bar has rounded corners on both sides. We're going to use a little trick to do this.

Let’s draw half a circle first. The HTML code is as follows:

<div class="dial-container">  <div class="wedge"></div></div>

We use the border-radius attribute and keyframe to implement the half-moon shape and rotation animation.
(picture is gif)

.wedge { animation: rotate 4s infinite linear; border-radius: 0 4em 4em 0; background: red; width: 2em; height: 4em; transform-origin: 0% 50%; }@keyframes rotate {  100% { transform: rotateZ(360deg); }}

Mask

As usual, I will probably use the CSS3 clip property. But due to browser kernel compatibility issues, I decided to give up. Here, we simply use overflow:hidden.

Two elements are used here. The width of the dial-container is only half that of the wedge, and it sets the overflow to hidden. The container is positioned on the right side of the semicircle and the wedge is rotated, so that a fan-shaped effect appears.

.dial-container { position: absolute; top: 0; left: 2em; width: 2em; height: 4em; overflow: hidden; }

In order to draw the complete circle, we need to create a second wedge and a second container, placed on the left.

The whole circle

I used a wrapper to position the two containers.

<div class="wrapper">  <div class="dial-container container1">    <div class="wedge"></div>  </div>  <div class="dial-container container2">    <div class="wedge"></div>  </div></div>

and use the following css to handle their positional relationship.

.wrapper { position: absolute; width: 4em; height: 4em; left: calc(50% - 2em); }.dial-container { position: absolute; top: 0; bottom: 0; overflow: hidden; width: 2em; }.wedge { background: red; height: 4em; width: 2em; }.container1 { left: 2em; }.container1 .wedge { animation: rotate-bg-1 4s infinite linear; border-radius: 0 4em 4em 0; left: 0; transform-origin: 0 50%; }.container2 { left: 0; }.container2 .wedge { animation: rotate-bg-2 4s infinite linear; border-radius: 4em 0 0 4em; transform-origin: 2em 2em; }/* First animation moves 180 degrees in the first 2 seconds */@keyframes rotate-bg-1 {  50%, 100% { transform: rotateZ(180deg); }}/* Second animation moves 180 degrees in the last 2 seconds */@keyframes rotate-bg-2 {  0%, 50% { transform: rotateZ(0); }  100% { transform: rotateZ(180deg); }}

Run result:

Progress

The next step is to turn the wedge into a progress bar. We can use pseudo-classes to draw a circle in the middle to cover it up.

<div class="wrapper">  <div class="dial-container container1">    <div class="wedge"></div>  </div>  <div class="dial-container container2">    <div class="wedge"></div>  </div></div>

.wrapper::after { content: ""; background: #fff; border-radius: 50%; width: 3em; height: 3em; position: absolute; top: 0.5em; left: 0.5em; } 

Now it looks like a progress bar.

Edge processing

The soft look of the Apple Watch animation is related to its rounded corners. To create such rounded corners, it is not possible to use css attributes on weget. But we can use a little trick.

<div class="wrapper">  <div class="dial-container container1">    <div class="wedge"></div>  </div>  <div class="dial-container container2">    <div class="wedge"></div>  </div>  <div class="marker start"></div>  <div class="marker end"></div></div>

The start element and the end element are two redundant elements used to place at the beginning and end of the progress bar (this generates rounded corners!)

.marker { background: green; border-radius: 50%; height: 0.5em; width: 0.5em; position: absolute; top: 0; left: calc(50% - 0.25em); }.end { animation: rotate-marker 4s infinite linear; transform-origin: 50% 2em; }@keyframes rotate-marker {  100% { transform: rotateZ(360deg); }}

The above CSS sets the end circle to green. And set transform-origin to the midpoint of the container.

Integrated together

Three such progress bars are integrated together to generate an Apple watch animation effect. Cool?

See the Pen Apple Watch Activity Dials CSS by Helkyle (@HelKyle) on CodePen.