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
 
corentinbettiol profile image
Corentin Bettiol •

Nice article!

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

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
 
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
 
madza profile image
Madza •

Useful, thanks 👍✨

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
 
ronaldohoch profile image
Ronaldo Hoch •

Amazing 😱

Collapse
 
ianbromwich profile image
Ian B •

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

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
 
ouzkagan profile image
ouzkagan •

👍👍👍

Collapse
 
roman_22c01bcfb71 profile image
Roman •

Nice job! Quit impressive

Collapse
 
jmlpez profile image
Jmlpez •

Awesome, you're taking css3 to the limit!

Collapse
 
geforcesong profile image
George Guo •

cool

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
 
smokerman profile image
Bob •

Amazing 👍

Collapse
 
michburkhalter profile image
michburkhalter •

Very extensive article. Thanks for sharing all these examples.

Collapse
 
kingbolumbu profile image
Kingbolumbu •

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

Collapse
 
rajeshroyal profile image
Rajesh Royal •

usefull information

Collapse
 
ouzkagan profile image
ouzkagan •

👍

Collapse
 
webs95 profile image
Aleksandr Semashko •

Wow!
Dude, is really cool. 👍

Collapse
 
albertsg profile image
Albert Soriano •

Really cool, thanks for sharing!

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
 
nunnaphat1234 profile image
b_ลีลๅ_d •

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

Collapse
 
zxhy profile image
HelloWorld •

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

Collapse
 
chokcoco profile image
Coco •

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

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
 
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
 
bwca profile image
Volodymyr Yepishev •

Amazing examples, thanks for sharing! :)

Collapse
 
artyprog profile image
ArtyProg •

Simply fantastic
Thank you :-)

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
 
coditdoc profile image
Codeitdoc7 •

Smart use of overflow

Literally blew my mind🤯

Collapse
 
fkranenburg profile image
Ferry Kranenburg •

Wow. Just... Wow.

Collapse
 
code_rabbi profile image
Emeka Orji •

Amazing!

Collapse
 
saqib1014 profile image
Saqib syed •

So much helpful

Collapse
 
ray_40 profile image
Ray Kim •

This is really coooooool. Thanks Coco.