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.

Download Source Code :

----------------------
Hope you might like these

1) Animated PS5 Product Card Design

2) Input Field with Floating Text Animation

3) Playlist - Hover Effect Tutorials

4) Playlist - Html And CSS Tutorials

5) Playlist - UI/UX Cards Design Tutorials

-----------------------
Connect with me :

----------------------
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

[nathanmedo]

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

[goodshiro]

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❤❤

[ИляГорев]

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

[АбайАлиев-ъп]

Enjoyed watching the video. Very clever !!!

[yajirushik]

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).

[UkraineAbveAll]

without "music" like this is much better 💯

[exemesuff]

the colored background keeps moving out of place when shrinking the page down, how to make it stick to the back of the card

[muhammadkhalil]

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

[afriend]

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. =)

[__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

[monkeyD.jayant]

.gallery-item {
width: calc(25% - 20px);
margin-bottom: 20px;
margin-right: 10px;
margin-left: 10px;
}

.gallery-item img {
width: 100%;
display: block;
border-radius: 30px;
}




/* Subtle hover effect for gallery images */
.gallery-item img:hover {
opacity: 0.8;
transition: opacity 0.3s ease-in-out;

}

[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

[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 😢

[Chris-jmgx]

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

[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