2 Types of Border Animations on HOVER! | Quick CSS - Animated Border Cards

Learn How to Create 2 Types of Border Animations on HOVER! (Quick CSS Tutorial) | Animated Border Cards
----------------------
Don't forget to SUBSCRIBE this channel.
➣bit.ly/380HnsS
Download Source Code :
✅bit.ly/3Ocb0JN
----------------------
Hope you might like these
1) Animated PS5 Product Card Design
➣ • Animated PS5 Product C...
2) Input Field with Floating Text Animation
➣ • CSS Only - Input Field...
3) Playlist - Hover Effect Tutorials
➣bit.ly/2OJMtMV
4) Playlist - Html And CSS Tutorials
➣bit.ly/31MojsT
5) Playlist - UI/UX Cards Design Tutorials
➣bit.ly/3PIIJsR
-----------------------
Connect with me :
➣insta : bit.ly/38N8WWo
➣fb page : bit.ly/3ybsTRK
➣tumblr : bit.ly/3vBiaOA
➣twitter : bit.ly/3kzWBHZ
----------------------
Thanks for watching :) 💙webkitcoding
Keywords -
#webkitcoding #hovereffect #cssanimation
css border animation on hover, simple border animation css, two types of css border effect,css two different border animations, quick css border effect,webkitcoding, how to create border animation in css, css border animation generator

[@sonubehera7882]

First viewer

[@goodshiro10]

Tip : you don't need to use "transform: rotate();" anymore, you can directly use it as a css property. like this -> "rotate: 69deg;" for x and y, you could like "rotate-x" or "rotate-y" Hope this helped❤❤

[@user-fe1tz6dz9j]

Every time when I write animation with css I break my brain, but it looks the really easy and nice. Thanks for this video🎉

[@s1nistr433]

It's easy all you gotta do is have other people do it then copy and paste

[@Amvflix7]

​@@s1nistr433😂

[@nathanmedo]

Sometimes I wonder how you people come with the brilliant ideas, appreciate

[@acidopcodes]

Cool effects

[@nextleveltech267]

Awesome... Thank you ❤️❤️

[@Infinite_Mainak]

How cool is that❤❤

[@alpmobs]

Thank you!

[@backupmagnate736]

Nice work.

[@ankushbhagatofficial]

Cool animations ✅

[@Thorfin6]

Really helpful ❤

[@darksoulcreeper7954]

damn noice!

[@xenxo]

Amazing Animation

[@user-lw9hx6kk8q]

Enjoyed watching the video. Very clever !!!

[@WebKitCoding]

Thnq❤

[@heyimnomee]

Thanks

[@Asalcik_fanboy2010]

good luck :)

[@shahfaisal3923]

Beautiufl

[@edsHTML]

cool border effects 😎

[@WebKitCoding]

Thnx buddy

[@yajirushik2871]

Good advice on inset animated border, try to calculate properly keyframe animation timing to achieve smooth animation without speed up on corners, it requires to properly declare steps(%) based on declared animation time(duration).

[@bharathkesari7350]

yo dude nice

[@WebKitCoding]

Thnq❤

[@UkraineAb0veAll]

without "music" like this is much better 💯

[@muhammadkhalil4043]

what if we want to give transparent background to card? is here any possibility to acheive this border effect with transparent background?

[@WebKitCoding]

No

[@afriend8961]

If I do this on an existing project (with other designs) and I don't use any flex/grid properties for this, will it still work? I wouldn't want to use these properties to not affect existing designs. =)

[@wardingward4884]

Flex and grid are just for layouts, he used grid to center the icon

[@__a_d_i_t_y_a__]

Without z-index animation is working on whole div But with z-index it is not showing border animation

[@darianschnose6177]

Did you set the z-index of the div or the span?

[@edwinaritama]

im curious, can you code something like this with tailwind? or does it way to advanced to code it in taildwind so you need to code it in the old way by using classes

[@bn5055]

All the layout of the cards and borders you could easily do with Tailwind. The keyframe animations can be done the "proper" tailwind way by adding it to the config, but tbh its quicker and easier to just include them in a @layer in your css file.

[@edwinaritama]

@@bn5055 so the conclusion is that its way easier and faster to do it traditionally right?

[@bn5055]

@@edwinaritama I didn't say that. The keyframes are easier to add in your base CSS file than they are the TW config because you don't need to faff around with css-in-js, but the base layout stuff is as relatively easy with Tailwind as everything else is.

[@Aasim____7]

hello dude how u add paper plane

[@WebKitCoding]

It's a font-awesome icon which added directly throw cdn link to its web server buddy❤

[@neodevils]

Can you increase your saving time a little longer? I see that you speed up the video and the refreshing page is like a flash-bang 😢

[@WebKitCoding]

Okay buddy, i will focus on it for upcoming tutorials

[@neodevils]

Thanks, @@WebKitCoding

[@vitebascodm7239]

source code link doesnt work💔

[@WebKitCoding]

working buddy, but paid

[@WolfGaming01_]

i cant download

[@WebKitCoding]

What happened?

[@WolfGaming01_]

@@WebKitCoding its locked lol i get redirected to a patreon

[@KevinGeller]

5 of 5 Stars for the idea 3 of 5 Stars for CSS next time use real classes and id's in this case animated_card and animated_card1 should be replaced by class animated_card for default card behaviors class style1 for first style class style2 for second style this way you can easily add new styles without changing the default behavior In your case animated_card and animated_card1 are more like IDs And please give your animation a proper name. "Animate" is not really expressive. hueAnimation or partRotation are more meaningful

[@goodshiro10]

A great tip for improving structure. Why is this not the top comment 😐

[@Chris-jm2gx]

The lack of space between your selectors and open curly is rubbing me the wrong way. Your code looks unprofessional.