Css animation across an Arc

Question

animation across an Arc

Is it possible with current CSS3 to animate an object (DIV) along an this arc?

Arun Bertil · Answer 1 · 2014-05-28T09:03:32.407

8

Check this

.wrapper {
    width: 500px;
    margin: 300px 0 0;
    transition: all 1s;
    transform-origin: 50% 50%;
}
.inner {
    display: inline-block;
    padding: 1em;
    transition: transform 1s;
    background: lime;
}
html:hover .wrapper {
    transform: rotate(180deg);
}
html:hover .inner {
    transform: rotate(-180deg);
}

edited May 28 '14 at 09:03

answered Sep 20 '13 at 09:01

Arun Bertil

4,598
4
33
59

ok, but i mean animation it must be infinite, how can i use this ? Here's my attempt http://jsfiddle.net/J9xgQ/ – Adam Wojda Sep 20 '13 at 09:13
I like the fulcrum way, +1 – Andrea Ligios Sep 20 '13 at 13:17

score 8 · Accepted Answer · answered Sep 20 '13 at 13:35

I've forked the (very good) @ArunBertil "fulcrum" solution to convert it to CSS3 Animation:

Running Demo

CSS

@keyframes drawArc1 {
    0%   { transform: rotate(180deg);  }
    100% { transform: rotate(0deg);    }
}

@keyframes drawArc2 {
    0%   { transform: rotate(-180deg); }
    100% { transform: rotate(0deg);    }
}

body{
    padding: 150px;    
    background: black;
}

.wrapper {
    width: 300px;
    animation: drawArc1 3s linear infinite;
}

.inner {    
    border-radius: 50%;
    display: inline-block;
    padding: 30px;    
    background: yellowgreen;
    animation: drawArc2 3s linear infinite;
}

HTML

<div class="wrapper">
    <div class="inner"></div>
</div>

Watch it on FireFox... to run it on other browsers, simply put the prefixes (@-webkit-keyframes, etc)

score 6 · Answer 3 · answered Sep 20 '13 at 18:00

Well, working on the work of Andrea based on the work of Arun ...

simplified to make use of only 1 div, and 1 animation:

@keyframes drawArc {
    0% { transform: rotate(0deg) translateX(150px) rotate(0deg) ;}
    100%{ transform: rotate(-180deg) translateX(150px) rotate(180deg);  }
}
@-webkit-keyframes drawArc {
    0% { -webkit-transform: rotate(0deg) translateX(150px) rotate(0deg) ;}
    100%{ -webkit-transform: rotate(-180deg) translateX(150px) rotate(180deg);  }
}


body{
    padding: 150px;    
    background: black;
}

.test {
    width: 30px;    
    border-radius: 50%;
    display: inline-block;
    padding: 30px;    
    background: yellowgreen;
    animation: drawArc 3s linear infinite;
    -webkit-animation: drawArc 3s linear infinite;
}

demo

Added also text in the div to show that it doesn't rotate

Css animation across an Arc

3 Answers3

demo