Animating circular image border

[codeispoetry]

I have created a code pen here:

I was trying to achieve that border should be delayed and it should have circular animation. It should start and then complete the circle(border).

I also found some code pens, but they are using SCSS and Pseudo element property. Is there any simple and easy way around by just using css animation?

https://codepen.io/cobra_winfrey/pen/mdJeqZb

[PaulOB]

Unfortunately its quite complicated to animate a border around a circle.

Here’s a revised codepen of an old demo of mine that shows one solution.

Most of it is smoke and mirrors

It’s quite hard to understand but the basics are that 2 circles are clipped in half and then each circle is half rotated around the circle. One half circle hides the other one until a half animation is complete and then the other half is animated to complete the circle.

There is no border as such but a solid background which is hidden by the inner elements to just allow the edge of the circles to be seen.

[Archibald]

@codeispoetry

I was trying to achieve that border should be delayed and it should have circular animation. It should start and then complete the circle(border).

Here is one way of doing it:

The SVG path is a dashed line with the length of dashes and gaps equal to the circumference. Animating the dash offset causes the circle to appear over a period of 5 seconds. There’s also a delay of 5 seconds before the animation starts.

[PaulOB]

@Archibald

Here is one way of doing it:

I was going to suggest SVG as that looks much neater