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

Подписаться 23 тыс.

Просмотров 180 тыс.

50% 1

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

Опубликовано:

2 янв 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 50

@sonubehera7882 5 месяцев назад

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 5 месяцев назад

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 5 месяцев назад

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

@Amvflix7 4 месяца назад

@@s1nistr433😂

@nathanmedo 4 месяца назад

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

@acidopcodes 5 месяцев назад

Cool effects

@nextleveltech267 4 месяца назад

Awesome... Thank you ❤️❤️

@alpmobs 3 месяца назад

Thank you!

@user-lw9hx6kk8q 5 месяцев назад

Enjoyed watching the video. Very clever !!!

@WebKitCoding 5 месяцев назад

Thnq❤

@backupmagnate736 Месяц назад

Nice work.

@darksoulcreeper7954 5 месяцев назад

damn noice!

@Thorfin6 2 месяца назад

Really helpful ❤

@Infinite_Mainak 4 месяца назад

How cool is that❤❤

@edsHTML 4 дня назад

cool border effects 😎

@WebKitCoding 4 дня назад

Thnx buddy

@ankushbhagatofficial 3 месяца назад

Cool animations ✅

@xenxo Месяц назад

Amazing Animation

@heyimnomee 2 месяца назад

Thanks

@shahfaisal3923 5 месяцев назад

Beautiufl

@Asalcik_fanboy2010 5 месяцев назад

good luck :)

@yajirushik2871 5 месяцев назад

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 5 месяцев назад

yo dude nice

@WebKitCoding 5 месяцев назад

Thnq❤

@UkraineAb0veAll Месяц назад

without "music" like this is much better 💯

@afriend8961 4 месяца назад

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

@muhammadkhalil4043 4 месяца назад

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

@WebKitCoding 4 месяца назад

@edwinaritama 5 месяцев назад

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 4 месяца назад

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 4 месяца назад

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

@bn5055 4 месяца назад

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

@__a_d_i_t_y_a__ 5 месяцев назад

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

@darianschnose6177 4 месяца назад

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

@Aasim____7 5 месяцев назад

hello dude how u add paper plane

@WebKitCoding 5 месяцев назад

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

@neodevils 5 месяцев назад

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 5 месяцев назад

Okay buddy, i will focus on it for upcoming tutorials

@neodevils 5 месяцев назад

Thanks, @@WebKitCoding

@vitebascodm7239 3 месяца назад

source code link doesnt work💔

@WebKitCoding 3 месяца назад

working buddy, but paid

@WolfGaming01_ 5 месяцев назад

i cant download

@WebKitCoding 5 месяцев назад

What happened?

@WolfGaming01_ 5 месяцев назад

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

@Chris-jm2gx 4 месяца назад

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

@KevinGeller 4 месяца назад

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 😐