Css animation in an arc

Question

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

Answer 1

I split @ArunBertil "fulcrum" (very good) solution to convert it to CSS3 Animation :

Demo version

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> 

Look at FireFox ... to run it in other browsers, just put the prefixes ( @-webkit-keyframes , etc.)

Answer 2

check this

http://dabblet.com/gist/1615901

 .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); } 

Answer 3

Well, working on Andrea's work based on Arun's work ...

simplified to use 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; } 

demonstration

Text has also been added to the div to show that it does not rotate