CSS Only Animate Draw Circle with Border-Radius and Transparent Background

CSS ONLY Animate Draw Circle with border-radius and transparent background

This is my solution.

I set a background on body to show it is transparent

body {  background: repeating-linear-gradient(45deg, white 0px, lightblue 100px);  height: 500px;  background-size: 500px 500px;  background-repeat: no-repeat;}
html {  height: 100%;}
#container {  position: absolute;  width: 400px;  height: 400px;   border: solid red 1px;   animation: colors 4s infinite;}
#halfclip {  width: 50%;  height: 100%;  right: 0px;  position: absolute;   overflow: hidden;   transform-origin: left center;   animation: cliprotate 16s steps(2) infinite;   -webkit-animation: cliprotate 16s steps(2) infinite;}
.halfcircle {  box-sizing: border-box;  height: 100%;  right: 0px;  position: absolute;  border: solid 25px transparent;   border-top-color: blue;   border-left-color: blue;   border-radius: 50%;}#clipped {  width: 200%;   animation: rotate 8s linear infinite;   -webkit-animation: rotate 8s linear infinite;}#fixed {  width: 100%;    transform: rotate(135deg);     animation: showfixed 16s steps(2) infinite;   -webkit-animation: showfixed 16s linear infinite;}
@-webkit-keyframes cliprotate {  0% {transform: rotate(0deg);}  100% {transform: rotate(360deg);}}
@keyframes cliprotate {  0% {transform: rotate(0deg);}  100% {transform: rotate(360deg);}}

@-webkit-keyframes rotate {  0% {transform: rotate(-45deg);}  100% {transform: rotate(135deg);}}
@keyframes rotate {  0% {transform: rotate(-45deg);}  100% {transform: rotate(135deg);}}
@-webkit-keyframes showfixed {  0% {opacity: 0;}  49.9% {opacity: 0;}  50% {opacity: 1;} 100% {opacity: 1;}}

<div id="container">    <div id="halfclip">        <div class="halfcircle" id="clipped">        </div>    </div>    <div class="halfcircle" id="fixed">    </div></div>

Draw border around a circle with animation

Hope this is what you want.

To make the border animation slow, just increase the time delay. Like I've done here.

.circle:hover {
  animation: border 2s ease 1 forwards;
}

updated code

EDITED

html {  height: 100%;}body {  height: 100%;  background: #ddd;}.header{  width:100%;  height:100px;  background:cyan;  z-index: 9999;}.circle_holder {  width: 150px;  margin: 0 auto;  padding: 10px;  overflow: hidden;}.circle {  position: relative;  width: 120px;  height: 120px;  border-radius: 50%;  background: red;  box-shadow: 60px -60px 0 2px #dddddd, -60px -60px 0 2px #dddddd, -60px 60px 0 2px #dddddd, 60px 60px 0 2px #dddddd, 0 0 0 2px #dddddd;}.circle:hover {  animation: border 2s ease 1 forwards;  cursor: pointer;}@keyframes border {  0% {    box-shadow: 60px -60px 0 2px #dddddd, -60px -60px 0 2px #dddddd, -60px 60px 0 2px #dddddd, 60px 60px 0 2px #dddddd, 0 0 0 2px black;  }  25% {    box-shadow: 0 -125px 0 2px #dddddd, -60px -60px 0 2px #dddddd, -60px 60px 0 2px #dddddd, 60px 60px 0 2px #dddddd, 0 0 0 2px black;  }  50% {    box-shadow: 0 -125px 0 2px #dddddd, -125px 0px 0 2px #dddddd, -60px 60px 0 2px #dddddd, 60px 60px 0 2px #dddddd, 0 0 0 2px black;  }  75% {    box-shadow: 0 -125px 0 2px #dddddd, -125px 0px 0 2px #dddddd, 0px 125px 0 2px #dddddd, 60px 60px 0 2px #dddddd, 0 0 0 2px black;  }  100% {    box-shadow: 0 -125px 0 2px #dddddd, -125px 0px 0 2px #dddddd, 0px 125px 0 2px #dddddd, 120px 40px 0 2px #dddddd, 0 0 0 2px black;  }}span {  position: absolute;  bottom: -50px;  color: #333;  text-transform: uppercase;  text-align: center;  font-weight: bold;}

<div class="header">
</div><div class="circle_holder" style="z-index: 1;">  <div class="circle">  <span>Lorem Ipsum Dolor </span> </div></div>

Is it possible to draw a partial circle outline in CSS (open ring shape)?

To create a circle that gradually draws it's outer path, use SVG.

SVG's stroke-dasharray property will turn any path into a dashed line, which you can use to your advantage by setting the dash size to be almost as long as the path itself.

Then use a CSS animation to gradually change the stroke-dashoffset to move the dash around the perimeter of your circle.

circle {  fill: white;  stroke: black;  stroke-width: 2;  stroke-dasharray: 250;  stroke-dashoffset: 1000;  animation: rotate 5s linear infinite;}
@keyframes rotate {  to {    stroke-dashoffset: 0;  }}

<svg height="100" width="100">  <circle cx="50" cy="50" r="40" /></svg>

Resizing SVG Circle Radius Using CSS Animation

In SVG 1.1 the radius of a circle was an attribute and not a CSS property. SVG 2 changes this and instead makes the circle's radius a CSS property that's mapped to an attribute.

CSS animations animate CSS properties and do not animate attributes.

Firefox has now implemented this part of the SVG 2 specification so the testcase in the question will work now although it didn't when the question was written.

SMIL animations will work on attributes (and CSS properties).

<html>
    <head>
        <link href = "styling.css" rel = "stylesheet" type = "text/css"></link>
    </head>
    <body>
        <svg class = "button" expanded = "true" height = "100px" width = "100px">
            <circle cx = "50%" cy = "50%" r = "35%" stroke = "#000000" stroke-width = "10%" fill = "none"/>
            <circle class = "innerCircle" cx = "50%" cy = "50%" r = "25%" fill = "#000000">
              <animate attributeName="r" begin="0s" dur="1s" repeatCount="indefinite" from="5%" to="25%"/>
            </circle>
        </svg>
    </body>
</html>

CSS animate circle border filling with color

There is a very easy to follow, informative and detailed tutorial on exactly how to achieve this (and more) by Anders Ingemann, which can be found here.

Its a fairly complex operation- so I'll simply distil the final stage from the tutorial here

Demo Fiddle

HTML

<div class="radial-progress">
    <div class="circle">
        <div class="mask full">
            <div class="fill"></div>
        </div>
        <div class="mask half">
            <div class="fill"></div>
            <div class="fill fix"></div>
        </div>
        <div class="shadow"></div>
    </div>
    <div class="inset"></div>
</div>

CSS/LESS

.radial-progress {
    @circle-size: 120px;
    @circle-background: #d6dadc;
    @circle-color: #97a71d;
    @inset-size: 90px;
    @inset-color: #fbfbfb;
    @transition-length: 1s;
    @shadow: 6px 6px 10px rgba(0, 0, 0, 0.2);
    margin: 50px;
    width: @circle-size;
    height: @circle-size;
    background-color: @circle-background;
    border-radius: 50%;
    .circle {
        .mask, .fill, .shadow {
            width: @circle-size;
            height: @circle-size;
            position: absolute;
            border-radius: 50%;
        }
        .shadow {
            box-shadow: @shadow inset;
        }
        .mask, .fill {
            -webkit-backface-visibility: hidden;
            transition: -webkit-transform @transition-length;
            transition: -ms-transform @transition-length;
            transition: transform @transition-length;
        }
        .mask {
            clip: rect(0px, @circle-size, @circle-size, @circle-size/2);
            .fill {
                clip: rect(0px, @circle-size/2, @circle-size, 0px);
                background-color: @circle-color;
            }
        }
    }
    .inset {
        width: @inset-size;
        height: @inset-size;
        position: absolute;
        margin-left: (@circle-size - @inset-size)/2;
        margin-top: (@circle-size - @inset-size)/2;
        background-color: @inset-color;
        border-radius: 50%;
        box-shadow: @shadow;
    }
}

Example jQuery (could be substituted with CSS)

$('head style[type="text/css"]').attr('type', 'text/less');
less.refreshStyles();
var transform_styles = ['-webkit-transform', '-ms-transform', 'transform'];
window.randomize = function () {
    var rotation = Math.floor(Math.random() * 180);
    var fill_rotation = rotation;
    var fix_rotation = rotation * 2;
    for (i in transform_styles) {
        $('.circle .fill, .circle .mask.full').css(transform_styles[i], 'rotate(' + fill_rotation + 'deg)');
        $('.circle .fill.fix').css(transform_styles[i], 'rotate(' + fix_rotation + 'deg)');
    }
}
setTimeout(window.randomize, 200);
$('.radial-progress').click(window.randomize);

Create a perfect circle with CSS

In order to achieve a perfectly round shape you'll need to have perfect square to begin with. So, for instance, your button will need to have dimensions like width: 32px; height: 32px. To turn a square into a circle you'll have to apply a border radius of 50% e.g. border-radius: 50%.

CSS Only Animate Draw Circle with Border-Radius and Transparent Background