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

CSS animations can create impressive visual effects, including drawing animated circles with transparent backgrounds. This technique uses border-radius and keyframe animations to create a smooth circle-drawing effect.

Basic Circle Structure

The animation uses multiple div elements to create the drawing effect. The main container holds two half-circles that rotate to simulate drawing:

<div id="box">
   <div id="demo">
      <div class="circlehalf" id="clipped"></div>
   </div>
   <div class="circlehalf" id="fixed"></div>
</div>

CSS Animation Styles

The CSS creates the drawing effect using transforms, opacity changes, and border properties:

body {
   background: repeating-linear-gradient(45deg, white 0px, green 100px);
   height: 400px;
   background-size: 400px 400px;
   background-repeat: no-repeat;
}

html {
   height: 100%;
}

#box {
   position: absolute;
   width: 400px;
   height: 400px;
   border: solid blue 2px;
   animation: colors 5s infinite;
}

#demo {
   width: 50%;
   height: 100%;
   right: 0px;
   position: absolute;
   overflow: hidden;
   transform-origin: left center;
   animation: cliprotate 18s steps(2) infinite;
   -webkit-animation: cliprotate 18s steps(2) infinite;
}

.circlehalf {
   box-sizing: border-box;
   height: 100%;
   right: 0px;
   position: absolute;
   border: solid 20px 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(145deg);
   animation: showfixed 18s steps(2) infinite;
   -webkit-animation: showfixed 18s linear infinite;
}

Keyframe Animations

The drawing effect is achieved through coordinated keyframe animations:

@-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;}
}

How the Animation Works

Key Animation Features

The animation combines several CSS techniques:

• Border-radius: Creates the circular shape with border-radius: 50%
• Transform-origin: Sets the rotation point for smooth animation
• Overflow hidden: Clips the circle drawing to create the progressive effect
• Opacity transitions: Controls visibility of different animation phases

Browser Compatibility

The animation includes webkit prefixes for broader browser support. Modern browsers support unprefixed versions, but prefixes ensure compatibility with older WebKit-based browsers.

Conclusion

This CSS-only animation creates an engaging circle-drawing effect using border-radius, transforms, and coordinated keyframes. The technique demonstrates how complex animations can be achieved without JavaScript, making it performant and lightweight.