Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by Armaan Dhanji
Armaan Dhanji
4,664 Points

How is box-shadow working to animate this circle in css?

In the following codepen: https://codepen.io/katmai7/pen/jCAhv

I wanted to understand how the "circle's border" is being animated the way it is. (The animation effect of a circle being drawn onto the screen). The part which confuses me is below. How is box-shadow related to drawing the border of a circle? Isn't box shadow just the shadow of an element?

@keyframes border{
  0% {
    box-shadow: 60px -60px 0 20px @color, -60px -60px 0 2px @color, -60px 60px 0 2px @color, 60px 60px 0 2px @color, 0 0 0 2px #E94E3D;
  }
  25% {
    box-shadow: 0 -125px 0 2px @color, -60px -60px 0 2px @color, -60px 60px 0 2px @color, 60px 60px 0 2px @color, 0 0 0 2px #fff;
  }
  50% {
    box-shadow: 0 -125px 0 2px @color, -125px 0px 0 2px @color, -60px 60px 0 2px @color, 60px 60px 0 2px @color, 0 0 0 2px #fff;
  }
  75% {
    box-shadow: 0 -125px 0 2px @color, -125px 0px 0 2px @color, 0px 125px 0 2px @color, 60px 60px 0 2px @color, 0 0 0 2px #fff;
  }
  100% {
    box-shadow: 0 -125px 0 2px @color, -125px 0px 0 2px @color, 0px 125px 0 2px @color, 120px 40px 0 2px @color, 0 0 0 2px #fff;
  } 
}

1 Answer

Steven Parker
Steven Parker
243,318 Points
Steven Parker
Steven Parker
243,318 Points

:point_right: The shadows are being moved away to reveal the circle.

Here's a way to make the operation clear: First, find the line that controls the animation speed (not shown above) and increase the time from .4 to something larger (try 5). Then, on each line of the the keyframes code change each instance of "@color" to some other color. They can all be the same, or you can make each one different (like "blue", "yellow", "purple", and "green").

After these changes, when you hover over the circle, the recolored shadows will be visible and how their movements reveal the circle will be obvious.