Тёмный

CSS animation keyframe tips 

Kevin Powell
Подписаться 926 тыс.
Просмотров 318 тыс.
50% 1

#css animation tips, where I look at removing useless keyframes that can even get in the way of animations, as well as doubling up multiple keyframes in one declaration.
--
Come hang out with other dev's in my Discord Community
💬 / discord
Keep up to date with everything I'm up to
✉ www.kevinpowell.co/newsletter
Come hang out with me live every Monday on Twitch!
📺 / kevinpowellcss
---
Help support my channel
👨‍🎓 Get a course: www.kevinpowell.co/courses
👕 Buy a shirt: teespring.com/stores/making-t...
💖 Support me on Patreon: / kevinpowell
---
My editor: VS Code - code.visualstudio.com/
---
I'm on some other places on the internet too!
If you'd like a behind the scenes and previews of what's coming up on my RU-vid channel, make sure to follow me on Instagram and Twitter.
Twitter: / kevinjpowell
Codepen: codepen.io/kevinpowell/
Github: github.com/kevin-powell
---
And whatever you do, don't forget to keep on making your corner of the internet just a little bit more awesome!

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

 

7 ноя 2023

Поделиться:

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 56   
@oOBeagleOo
@oOBeagleOo 8 месяцев назад
Lets say we have a bell animation that is working nicely, what if we broke it and made the code more complicated
@StinkyCatFarts
@StinkyCatFarts 7 месяцев назад
Then You shouldn’t be coding in the first place lmao
@TheSparkdaemon
@TheSparkdaemon 7 месяцев назад
@@StinkyCatFarts or looking for improvement, it depends on your mindset
@StinkyCatFarts
@StinkyCatFarts 7 месяцев назад
@@TheSparkdaemon The op was shitting on the abstraction and decoupling
@TheSparkdaemon
@TheSparkdaemon 7 месяцев назад
@@StinkyCatFarts Got a bad lecture there, whoopsi :s
@landenenglish1291
@landenenglish1291 7 месяцев назад
First animation looked the best
@mostafarezaie-yt
@mostafarezaie-yt 7 месяцев назад
How to successfully destroy a well bell shaking animation 😂
@NiceChange
@NiceChange 8 месяцев назад
N you took off the 0% the bell default becomes 30deg so it is not hanging straight. Crooked bell...shouldn't the default start at 0%?
@INAVACL
@INAVACL 8 месяцев назад
Agreed
@KewalTailor
@KewalTailor 7 месяцев назад
Depends
@howdydowdy592
@howdydowdy592 7 месяцев назад
The default didn't become 30deg, he set it to 30deg to demonstrate that the 0%{ 0deg } could cause issues if you changed the default rotation
@nathanielreeves_dev
@nathanielreeves_dev 8 месяцев назад
The “it works on my machine” is the only tech RU-vidr merch I might just buy lol, the guys at work would love that
@Fs3i
@Fs3i 7 месяцев назад
I'd argue that the one with the explicit 0 and 100% is the best and most readable, because: - The information is contained in one place, the animation. - The information reads linerarly, top-to-bottom I don't have to do crazy mental maths. The only time I'd consider using the `,` syntax for multiple percentages if I e.g. want the animation to stay still for the first 10%, pause in the middle for a bit, or stuff like that. Everything else, especially chaging the order, is more obfuscation rather than simplification. Like "30%, 70% followed by "50%, 85%", that's just plain harder to read.
@JasonJA88
@JasonJA88 8 месяцев назад
ooh a piece of candy
@ekchills6948
@ekchills6948 7 месяцев назад
Wow! The details in the final result is really nice
@pankichal
@pankichal 8 месяцев назад
Watching this I just feel the need to recreate it with right transform-origin on it.
@Uguru-John
@Uguru-John 8 месяцев назад
Did not know i could do it like that
@cyb3rjunky609
@cyb3rjunky609 8 месяцев назад
My bell shakes 😂😂
@amaury_permer
@amaury_permer 8 месяцев назад
That's an awesome tip as always but I liked the first animation for some reason
@nguyentrongnhan4486
@nguyentrongnhan4486 4 месяца назад
Thank you
@devoxygen7395
@devoxygen7395 8 месяцев назад
Beautiful
@TheCoolerMaz
@TheCoolerMaz 7 месяцев назад
"Hey this code is technically better but it doesnt work so I hope that fucking helps you somehow"
@biyrololo
@biyrololo 8 месяцев назад
Nice!
@devarshihazarika4871
@devarshihazarika4871 6 месяцев назад
I remember it didnt used to me like this from the beginning
@isaacjon
@isaacjon 8 месяцев назад
Thanks
@poesero
@poesero 7 месяцев назад
how about you wanna make it shake but instead of it shakeing around the center I want it on the top where you usually hold them ?? is it possible??
@Frexuz
@Frexuz 7 месяцев назад
30,70 and 50,85 on the same line 🤮 the point of a timeline is that it's linear (in your brain). Now I have to jump back and forward trying to figure out what the animation is doing
@truvc
@truvc 7 месяцев назад
You watch it and know what it’s doing. And now you can tweak the parameters more easily.
@AlexanderTrefz
@AlexanderTrefz 8 месяцев назад
This is a great video full of antipatterns all over the place. Do not do any of this if you want your PR to be merged in any place with maintainability standards.
@jonathanjohnson2785
@jonathanjohnson2785 8 месяцев назад
Hated css, thanks to you not so much anymore. Thanks Kev❤
@AngryApple
@AngryApple 8 месяцев назад
sure make the code completely not readable anymore. CSS Animations are already confusing as hell...
@yadusolparterre
@yadusolparterre 8 месяцев назад
What if you were trying to run the animation on hover? How would you make sure that the animation doesn't abruptly terminate when user unhovers the icon?
@rossclutterbuck1060
@rossclutterbuck1060 8 месяцев назад
JavaScript, or possibly doing some weird combination of transitions and animations
@nowYouSeeMeNowYouDon-
@nowYouSeeMeNowYouDon- 8 месяцев назад
Give it a transition duration so it will transition back smoothly when the mouse unhovers the icon!
@ThanHtutZaw3
@ThanHtutZaw3 7 месяцев назад
when rotating 0deg to 360 deg 0% and 100% is need to write . But when animate grid template row 0fr to 1fr , it should 0% 50% 100% to get smooth loop.
@stickysteve14
@stickysteve14 7 месяцев назад
Satire
@aMyst_1
@aMyst_1 7 месяцев назад
guys you can just change the bell default from 30degs to 0degs, what he wanted to show you was you didn't need the 0 and 100 because u can set the bell default in another line of code
@다루루
@다루루 8 месяцев назад
🤩
@lifealliancegroup
@lifealliancegroup 8 месяцев назад
Exactly the way I see...
@azizbekjuraev1
@azizbekjuraev1 7 месяцев назад
I don’t think developers need to know how to create bells like this in 2024. 😂
@sunofabeach9424
@sunofabeach9424 8 месяцев назад
aren't there any variables?..
@muhammad_zohaib936
@muhammad_zohaib936 Месяц назад
King of css 🔥🔥🔥🔥🤍
@AmodeusR
@AmodeusR 8 месяцев назад
The first animation looks better.
@Lathburn
@Lathburn 8 месяцев назад
Wake and shake
@hdhsu-dg6fb
@hdhsu-dg6fb 6 месяцев назад
you sound just like the guy who plays around with the arduino stuff
@yourlocalhuman3526
@yourlocalhuman3526 Месяц назад
Not worth thr complication even if its a small complication at that
@swarajbaral6416
@swarajbaral6416 7 месяцев назад
Y’all commenting that he destroyed shit, you don’t know who he is, do you ? 😂
@aMyst_1
@aMyst_1 7 месяцев назад
he didn't right? cause the default is set at 30degs in another line of code so you can change it to 0degs right?
@yourlocalhuman3526
@yourlocalhuman3526 Месяц назад
Yes. However the video itself isn't worth doing. Keep it simple Vs needing the mental calculation with what he suggested. It's just saving 3 lines. It's too miniscule​@@aMyst_1
@bossaddict08
@bossaddict08 8 месяцев назад
Leaving the bell slanted looks terrible
@aMyst_1
@aMyst_1 7 месяцев назад
you can just change the bell default
@hereallyfast
@hereallyfast 7 месяцев назад
That's why I hate CSS man. I don't get any of this
@nota10Xdev
@nota10Xdev 7 месяцев назад
Bruh.. The first one was better
@mikk5428
@mikk5428 7 месяцев назад
What was the point of this lol. First animation was literally best. 😅
@warguy6474
@warguy6474 8 месяцев назад
heyyyy wait i made this animation a few weeks ago... glad to see i didnt have to copy someone you someone else for once 😂
@fernandojavierbianchi431
@fernandojavierbianchi431 8 месяцев назад
hermoso
Далее
2 better alternatives to overflow: hidden
11:04
Просмотров 153 тыс.
Learn Flexbox in 15 Minutes
15:12
Просмотров 1,1 млн
No one will play with him( #standoff #meme #grenade
00:12
Anchor Is The Best New CSS Feature Since Flexbox
1:00
Просмотров 346 тыс.
Keyframe com TailwindCSS
8:50
Просмотров 1 тыс.
Fade In on Scroll | HTML, CSS & JS Tutorial
4:40
Просмотров 6 тыс.
Award Winning Animation With Only 20 Lines Of CSS?
6:59
Learn CSS Grid in 20 Minutes
18:35
Просмотров 775 тыс.
Learn CSS Grid - A 13 Minute Deep Dive
13:35
Просмотров 502 тыс.
Squares | HTML CSS
1:00
Просмотров 1,5 млн
No one will play with him( #standoff #meme #grenade
00:12