DEV Community

Fantastic CSS border animation

Coco on July 22, 2022

Today I visited the blog site - shoptalkshow, and it was very interesting to see such a style: I think its style is unique, especially some of t...
Collapse
 
immayurpanchal profile image
Mayur Panchal

This is outstanding. Thanks a lot Coco for sharing. Got to know about many creative ways to create beautiful animated borders. Especially those animations which explains behind the scene of how the border is generated, that is commendable.

Collapse
 
corentinbettiol profile image
Corentin Bettiol

Nice article!

I used to do some things on borders too, here's one example:

Collapse
 
philips_salt_2e560e0fbb64 profile image
philips salt • Edited

Hey there !
I appreciate for this effort. Many thanks for posting. I learned how to make gorgeous animated borders in a variety of inventive methods. This is bootzine particularly true of the animations that show how the border is formed behind the scenes.

Collapse
 
tlstechtrekker profile image
Tami Schultz

These are some really AMAZING effects. When you need something to catch the eye that is unusual, this is great. Your depth of exploration is greatly appreciated -- it inspires me to explore this topic a lot further--thanks a lot!

Collapse
 
madza profile image
Madza

Useful, thanks 👍✨

Collapse
 
jmlpez profile image
Jmlpez

Awesome, you're taking css3 to the limit!

Collapse
 
ouzkagan profile image
ouzkagan

👍👍👍

Collapse
 
ianbromwich profile image
Ian B

Hey Coco, thanks for sharing, I'll have a nice play around with borders this afternoon :)

Collapse
 
ouzkagan profile image
ouzkagan

👍

Collapse
 
ronaldohoch profile image
Ronaldo Hoch

Amazing 😱

Collapse
 
geforcesong profile image
George Guo

cool

Collapse
 
smokerman profile image
Bob

Amazing 👍

Collapse
 
kingbolumbu profile image
Kingbolumbu

This is great. I like how you showed the illusion of how these things work. Very valuable

Collapse
 
minhpt0903 profile image
Michael P.

So cool, Thank you sharing! Keep it up!

Collapse
 
harshad_tweet profile image
Harshad Prajapati

Fantastic
Mind blowing
Thanks for sharing

Collapse
 
roman_22c01bcfb71 profile image
Roman

Nice job! Quit impressive

Collapse
 
kissu profile image
Konstantin BIFERT

Nice one! Quite creative.

Collapse
 
andrewbaisden profile image
Andrew Baisden

These border animations look so fun to try out.

Collapse
 
rajeshroyal profile image
Rajesh Royal

usefull information

Collapse
 
michburkhalter profile image
michburkhalter

Very extensive article. Thanks for sharing all these examples.

Collapse
 
alidarrudi profile image
ali

Whenever I want an animation, I look for it on the net. Why should I take the time to fix it?

Collapse
 
mrmobin profile image
Mobin

Good job !
Also see my new post if u want :)
dev.to/mrmobin/javascript-1--3mp3

Collapse
 
chrux profile image
Christian Torres • Edited

Thanks for the article, very instructive, but I am curious, what library or service did you use for the gif? they look really cool with the play/pause button.

Collapse
 
zxhy profile image
HelloWorld

哈哈哈,图片上一个“非直角”(汉语),让我好奇地看了下作者,好熟悉的头像

Collapse
 
chokcoco profile image
Coco

哈哈哈,老乡见老乡,两眼泪汪汪~

Collapse
 
nunnaphat1234 profile image
b_ลีลๅ_d

Very beautiful, amazing, the developer's work is something that is very valuable, most appreciated.

Collapse
 
albertsg profile image
Albert Soriano

Really cool, thanks for sharing!

Collapse
 
webs95 profile image
Aleksandr Semashko

Wow!
Dude, is really cool. 👍

Collapse
 
jonrandy profile image
Jon Randy 🎖️ • Edited

Nice.

Today I visited the same site, only to find it's totally different to your screen grab. Is your post a re-post of an old post?

Image description

Collapse
 
jonrandy profile image
Jon Randy 🎖️

From checking the internet archive, it looks like they switched to this new design in Feb 2021. You can see a snapshot of the old design here

Collapse
 
chokcoco profile image
Coco • Edited

Hi, sorry, I am a front-end developer in China. I did write this article over a year ago, and recently wanted to get out of the country and post my articles on domestic technical forums to MEDIUM or DEVTO for more people to see, so I hope you will enjoy the content.

Collapse
 
craftyminer1971 profile image
CraftyMiner1971

I'm going to steal this, even though it's on a public domain website, for my own use! :)

Collapse
 
usernamedd profile image
usernamedd

I have done that already

Collapse
 
vcorleone profile image
Vito Corleone

Amazing! Your depth of exploration is greatly appreciated. Many thanks for posting this helpful article. I learned how to make gorgeous animated borders in a variety of inventive methods. This is particularly true of the animations that show how the border is formed behind the scenes.

Collapse
 
henriquecm profile image
Henrique César Madeira

There's a small untranslated section below the gif of the moving dashed border.

Other than that, this article has several cool effects I would like to try when I have the chance.

Collapse
 
chokcoco profile image
Coco

Oh, I just noticed that, thanks for the heads up. They've been translated now. And I have tons of CSS tips. But they are all in Chinese now, and I will gradually translate them and move them to DEV.TO. I hope you will like them.

Collapse
 
saqib1014 profile image
Saqib syed

So much helpful

Collapse
 
fkranenburg profile image
Ferry Kranenburg

Wow. Just... Wow.

Collapse
 
bwca profile image
Volodymyr Yepishev

Amazing examples, thanks for sharing! :)

Collapse
 
code_rabbi profile image
Emeka Orji

Amazing!

Collapse
 
coditdoc profile image
Codeitdoc7

Smart use of overflow

Literally blew my mind🤯

Collapse
 
ray_40 profile image
Ray Kim

This is really coooooool. Thanks Coco.