Is it possible to use the css keyword to animate a div counterclockwise in pi?

Question

Question:

Is it possible to animate the .watch-face inner circle from 12 o'clock, counterclockwise, full revolution or 2πr only in css keyframes?

---

The completed animation will look here:

FULL ANIMATION:

Check the starting point in real time: Code Example

HTML:

 <div class="watch-container"> <div class="watch-face"></div> </div> 

SCSS

 $watch-face-size: 165; $watch-border-size: 185; .watch-face { height: $watch-face-size + px; width: $watch-face-size + px; background: green; box-sizing: border-box; border-radius: $watch-face-size + px; position: relative; display: inline-block; &.animate-counter-clockwise { //How to write a keyframe animation to animate from } &::after { content: "10"; position: absolute; font-size: 68px; color: #fff; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; text-align: center; font-weight: 400; letter-spacing: -3px; } &::before { position: absolute; content: " "; border: 5px solid green; background: transparent; border-radius: $watch-border-size + px; width: $watch-border-size + px; height: $watch-border-size + px; top: -10px; left: -10px; } } //boilerplate styles html { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; } *, *:before, *:after { -webkit-box-sizing: inherit; -moz-box-sizing: inherit; -ms-box-sizing: inherit; -o-box-sizing: inherit; box-sizing: inherit; } .watch-container { width: 30%; margin: 50px auto; line-height: 22px; font-family: 'Roboto', arial, sans-serif; font-size: 14px; font-weight: 400; text-align: center; } 

Answer 1

I would use SVG for this animation, see codepen solution :

 <div class="watch-container"> <div class="watch-face"> <svg class="animator"> <circle cx="50%" cy="50%" r="100" /> </svg> </div> </div> 

So you can animate the circle with a simple one:

 @-webkit-keyframes clock-animation { 0% { stroke-dashoffset: 0; } 33% { stroke-dashoffset: 628; } 100% { stroke-dashoffset: 628; } } .animator { height: 100%; width: 100%; circle { animation: clock-animation 3s linear infinite; fill: transparent; stroke: white; stroke-dasharray: 628; stroke-dashoffset: 0; stroke-width: 200px; transform: rotate(-90deg); transform-origin: 50% 50%; } } 

Short Description: You need to create an SVG with a circle element inside. The circle element has a border (stroke) that actually fills the entire size of the circle. Then you need to determine the appearance of the stroke using stroke-dasharray , which sets the stroke width to one stroke (in our case 100%) and manipulates this single large dash using stroke-dashoffset . Offset moves the line, and it slightly leaves the circle.

I selected the numbers manually using a simple guessing / chrome console, but they are quite calculated with the usual school geometry rules, and SASS helps a lot here.

What's really convenient with this method is that you only need one SVG element and a really small piece of CSS. It looks very beautiful and makes me remember school days why this is my favorite way to do it.

Inspired by this amazing step sequence

Answer 2

I don’t know how you could revive your current markup. As far as I know, animating divs in the radial direction is not possible. However, you can fake it by turning the squares and adding some coverage. Here is a demo:

http://codepen.io/apexskier/pen/wGovRy

 <div class="watch-face animating"> <div class="cover"></div> <div class="a"></div> <div class="b"></div> <div class="c"></div> <div class="d"></div> </div> 

a , b , c and d represent the four quadrants of your watch, each of which will be rotated in the middle and shown and hidden as needed. cover used to hide the first, as it gradually appeared.

I used z-index for the correct layer.

Here are some of the important css (see codecen for everything)

EDIT: Fixed borders around the quadrant, making the whole thing equal width

 .watch-face { .a, .b, .c, .d, .cover { position: absolute; height: ($watch-face-size / 2); width: ($watch-face-size / 2); background-color: green; z-index: 5; transform-origin: bottom right; border-top-left-radius: ($watch-face-size / 2) - 1; border-top: 1px solid #fff; // hides a nasty green aliasing line border-left: 1px solid #fff; // hides a nasty green aliasing line } .cover { opacity: 0; } &.animating, &.animate { .a, .b, .c, .d, .cover { animation-duration: 4s; animation-timing-function: linear; } } &.animating { .a, .b, .c, .d, .cover { animation-iteration-count: infinite; } } &.animate { .a, .b, .c, .d, .cover { animation-iteration-count: 1; } } .a { animation-name: clock-a; opacity: 1; transform: rotate(90deg); } .b { animation-name: clock-b; transform: rotate(180deg); } .c { animation-name: clock-c; transform: rotate(270deg); } .d { animation-name: clock-d; transform: rotate(360deg); } .cover { animation-name: clock-cover; z-index: 10; background-color: #fff; } } @keyframes clock-cover { 0% { opacity: 1; } 74.9999999% { opacity: 1; } 75% { opacity: 0; } 100% { opacity: 0; } } @keyframes clock-a { 0% { transform: rotate(0); } 25% { transform: rotate(90deg); } 100% { transform: rotate(90deg); } } @keyframes clock-b { 0% { transform: rotate(90deg); opacity: 0; } 24.999999% { opacity: 0; } 25% { transform: rotate(90deg); opacity: 1; } 50% { transform: rotate(180deg); } 100% { transform: rotate(180deg); opacity: 1; } } @keyframes clock-c { 0% { transform: rotate(180deg); opacity: 0; } 49.999999% { opacity: 0; } 50% { transform: rotate(180deg); opacity: 1; } 75% { transform: rotate(270deg); } 100% { transform: rotate(270deg); opacity: 1; } } @keyframes clock-d { 0% { transform: rotate(270deg); opacity: 0; } 74.999999% { opacity: 0; } 75% { transform: rotate(270deg); opacity: 1; } 100% { transform: rotate(360deg); opacity: 1; } }