How to Create a Smoothly Animated Circle Drawing Effect with a Transparent Background Using CSS Only?

CSS Only Animate Draw Circle with border-radius and Transparent Background

Problem:

How to create an animated border-radius circle with a transparent background while masking the initial portion of the circle for a drawing effect?

Solution:

1. Establish the Canvas:

   • Define the container with absolute positioning and a border for reference.
   • Create a 50% width, absolute positioned half-clip element for the mask.

2. Create the Circle:

   • Within the half-clip, place a circle with a transparent border and blue top and left border colors.
   • Position the circle right-aligned within the half-clip.

3. Animate the Drawing:

   • Use CSS animations to rotate the circle 135 degrees from its initial -45-degree position to give the appearance of drawing.
   • Animate the half-clip to rotate 360 degrees to keep the mask in place during the rotation.

4. Maintain Transparency:

   • Add a repeating linear gradient to the body to ensure transparency and provide visual context.
   • Scale the gradient to the container size and set the background-repeat to no-repeat.

5. Fix the Half Circle:

   • Create a second half of the circle (fixed) with no animation, rotated 135 degrees.
   • Animate the opacity of the fixed half circle to appear after 50% of the animation time.

6. Control Animation Timing:

   • Adjust the animation durations and timings as desired to achieve the desired drawing speed and effect.

Code Snippet:

<code class="css">body {
  background: repeating-linear-gradient(45deg, white 0px, lightblue 100px);
  height: 500px;
  background-size: 500px 500px;
  background-repeat: no-repeat;
}

#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; }
}
</code>

The above is the detailed content of How to Create a Smoothly Animated Circle Drawing Effect with a Transparent Background Using CSS Only?. For more information, please follow other related articles on the PHP Chinese website!