10 CSS animation tips and tricks

แชร์
ฝัง
  • เผยแพร่เมื่อ 16 มิ.ย. 2024
  • CSS transitions and animations can be a lot of fun, and there are so many neat tips and tricks you can do with them!
    🔗 Links
    ✅ The CSS challenge video: • I've been challenged t...
    ✅ More on prefers-reduced-motion: • 3 super small changes ...
    ✅ More information on @property on the MDN: developer.mozilla.org/en-US/d...
    ⌚ Timestamps
    00:00 - Introduction
    00:43 - Different timing functions for different states
    02:23 - The order of keyframe animations doesn’t matter
    04:00 - Declaring multiple keyframes with one declaration
    05:05 - Omiting 0% and 100%
    06:10 - Animating transform and the individual transform properties
    07:52 - Using negative animation delays
    10:08 - prefers-reduced-motion
    12:44 - Using the same animation multiple times within one declaration
    15:05 - Using @property to animate custom properties
    #css
    --
    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 TH-cam 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!

ความคิดเห็น • 95

  • @DampeS8N
    @DampeS8N ปีที่แล้ว +104

    An animation technique I don't often see is what I call The Poof. Very simple: transition to a big-ass blur, opacity to 0 and scale up. Add in a skew and a translation in a direction for extra flair. Looks like the element disappears in a puff of smoke. I'm sure you can think of situations where this would be appropriate and satisfying. The reverse is also pretty impressive.

    • @Brutakk
      @Brutakk ปีที่แล้ว +9

      Thanos animation

    • @ryanscheuer7491
      @ryanscheuer7491 ปีที่แล้ว +2

      I love mixing in a transformY with this as well! Looks super clean & physical.

    • @Venistro
      @Venistro ปีที่แล้ว +6

      A codepen would be very nice :D

    • @user-zn6cv1jf8e
      @user-zn6cv1jf8e 8 หลายเดือนก่อน

      oh yess @@Venistro

  • @nikolitilden8224
    @nikolitilden8224 ปีที่แล้ว +3

    Your content is so freaking good man. Thank you for all the help you do for the community!

  • @johnKeysCloudSonics
    @johnKeysCloudSonics 10 หลายเดือนก่อน +1

    your passion for this is so evident. very inspiring stuff! thank you!

  • @user-kn4oi9oh4i
    @user-kn4oi9oh4i 5 หลายเดือนก่อน +2

    Great advice from the CSS King! Thank you good sir.

  • @MegaClockworkDoc
    @MegaClockworkDoc ปีที่แล้ว

    As usual, you exceed expectations. Thank you for putting this video together

  • @Technoph1le
    @Technoph1le ปีที่แล้ว +40

    8:30 If you want this in CSS, there's another solution as well. We can use custom properties to achieve the same result:
    ```html
    ```
    ```css
    .dot {
    animation-delay: calc(50ms * var(--i));
    }
    ```
    Basically, you don't declare custom properties in CSS, but rather in HTML with "indexing". Also, less code in your CSS. 🙂

    • @Issvor
      @Issvor ปีที่แล้ว +1

      OnlineTutorials taught me this and I love this trick

  • @Citadelband530
    @Citadelband530 ปีที่แล้ว +1

    Just a quick thanks! Your videos and quick tips and tricks have helped me understand how css works in a practical everday environment❤🎉

  • @gykonik
    @gykonik ปีที่แล้ว +33

    Awesome information in that video! Maybe you could consider doing some sort of series "How CSS works under the hood"? In previous videos ,ou mentioned some things like "CSS parses the selectors from right to left" and stuff that I didn't know before. Moreover, I think many of us have no clue how CSS really works, and just know how to use it. (And you could build upon that series by another series about optimization :D)
    Would love to see something like that! 😊

    • @RichardOles
      @RichardOles 10 หลายเดือนก่อน

      Yes. Got my vote. I’m relatively new to all this, and I’m amazed at what css can do. But there are so many css properties that appear similar, it’s difficult to keep straight. Like justify-content Vs justify-items etc. things like that.
      I need to create or find a kind map of what properties go with what css rules etc.
      even my vernacular might need a tweak. Hope I’m clear.

  • @Cipscis
    @Cipscis ปีที่แล้ว +17

    Another animation/transtion trick I find really useful is that the visibility property can be animated. This can be useful for accessibility, since if you're doing something like animating an element's height to or from 0, you should be making it visibility hidden when it's collapsed so the user can't do stuff like tab into the hidden area with their keyboard focus.
    Because the visibility property has discrete values, they will flip at the midpoint of a transition or animation. But with animations you can "fix" this by putting two keyframes at the same point, so that midpoint is also at that point.
    But you can set up an animation with the same visibility value at 0% and 100%, so once the animation is over it will fall back to the value set directly on an element. That way, when you're hiding an element you can set its visibility to hidden, but give it a "stayVisible" animation to delay that value changing until your other animation or transition is complete.
    Of course this is all easy to do with JavaScript, but it's nice to know you can do it all right in your CSS instead.

  • @iranmine123
    @iranmine123 ปีที่แล้ว

    I really love the property idea, thats so nice like we can do lot of things with that, especially the gradient one
    Hope it gets added in all browsers

  • @kohelet910
    @kohelet910 ปีที่แล้ว

    I didn't know all of the tips you gave us :) ! Thanks 😀 I really like when you give tips and informations about accessibility.

  • @RonDro67
    @RonDro67 ปีที่แล้ว

    WE LOVE YOU KEVIN! You've taught me so much the last several years! Thank you!

  • @aleksandr95
    @aleksandr95 ปีที่แล้ว

    Thanks for the video. As always very useful.

  •  ปีที่แล้ว

    Awesome! it was very interesting stuffs! thanks for that!

  • @CharlesSmall
    @CharlesSmall ปีที่แล้ว

    Thank you for the video Kevin. you are a master.

  • @WakattA-
    @WakattA- ปีที่แล้ว +1

    Thanks for the video sir 😄

  • @canarymultimedia
    @canarymultimedia ปีที่แล้ว

    Didn't know about prefers-reduced-motion and that it even is important for (simple) smooth scrolling, very interesting

  • @czerskip
    @czerskip ปีที่แล้ว

    Awesome! Let's mix the gradient backgrounds with animation in another episode 👏😁

  • @alanbloom20
    @alanbloom20 ปีที่แล้ว

    Fascinating concept about the transform rotate and the rotate counteracting each other…

  • @baljka17
    @baljka17 5 หลายเดือนก่อน

    The last one is a gem 💎

  • @_chris_6786
    @_chris_6786 ปีที่แล้ว

    Brilliant!

  • @GR_BackingTracks
    @GR_BackingTracks ปีที่แล้ว

    Very cool!
    @property is above my level yet, but I'm definitely gonna work in some @keyframe animation right now...

  • @programingwithali2461
    @programingwithali2461 ปีที่แล้ว

    Thanks for this video

  • @priyansh7
    @priyansh7 ปีที่แล้ว +1

    Love you sir

  • @wlockuz4467
    @wlockuz4467 ปีที่แล้ว

    As someone who comes from the native mobile world its always mind blowing how simple and elegant the web animation API is.

  • @MellstroyMemeSUS
    @MellstroyMemeSUS ปีที่แล้ว

    great video Kevin

  • @privuspriv
    @privuspriv ปีที่แล้ว

    thanks for this

  • @MajidHashemi-rt8le
    @MajidHashemi-rt8le 8 หลายเดือนก่อน

    Thanks 😊

  • @nove1398
    @nove1398 ปีที่แล้ว

    Nice tips, the animation with only 50% really handy.

  • @jfftck
    @jfftck ปีที่แล้ว

    I am looking forward to CSS counters supporting returning numerical values instead of strings so we can just incrementally add delay or have more complex list indentations where you can have a left margin that doesn’t indent and everything right of it does.

  • @nina2602ais
    @nina2602ais ปีที่แล้ว

    nice video! thank you so much for your great content. One question:
    in terms of SVG animation what do you think is better to use on a react-app project Gsap or lottie?

  • @BO-ny5mm
    @BO-ny5mm ปีที่แล้ว

    Really enjoyed video and will definitely use this tricks! Thank you Kevin

  • @warrenzang1675
    @warrenzang1675 24 วันที่ผ่านมา

    The T-shirt tho👕 W bro

  • @rickardelimaa
    @rickardelimaa ปีที่แล้ว +3

    19:05 - this can also be achieved by animating the background position, having the gradient be 200% of the button width (going from red to blue back to red again) and then translate it's position -100%.

    • @KevinPowell
      @KevinPowell  ปีที่แล้ว

      Yup, I noticed when editing that it wasn't the best example, lol. But we can animate the colors to anything, change the angle of the gradient... it opens up so many doors (and of course, not only for gradients!)

    • @rickardelimaa
      @rickardelimaa ปีที่แล้ว

      @@KevinPowell Yeah, I'm looking forward to the day when properties are fully supported.

  • @wlockuz4467
    @wlockuz4467 ปีที่แล้ว

    19:08 Mind blown, this is a game changer!

  • @outpost31737
    @outpost31737 ปีที่แล้ว +2

    Kev your bonce needs a trim I thought you were about to topple over at one point 😂 Sorry it's my insane sense of humour :) Great vid as always.

  • @insearchof9090
    @insearchof9090 ปีที่แล้ว

    Thanks CSS Pope.

  • @guillermoemmanuelsanchezin1664
    @guillermoemmanuelsanchezin1664 ปีที่แล้ว

    I'm looking forward an animation series 😬😬

  • @richardmhain
    @richardmhain ปีที่แล้ว

    Nice animations for games :)
    I guess -100ms animation-delay is like when u click it, it's like clicking it 100ms ago. Dots looks behaving that way starting at the top already when u click given that -value. Makes sense - back, + forward. Good 2c no JS for many effects.
    Great animations treats demo, maybe useful on projects someday. Thanks for holy week CSS treat - Cheers!

  • @sudoscientist255
    @sudoscientist255 ปีที่แล้ว

    Hi Kevin, I've been doing a lot of reading into how to use custom @property . One thing I keep coming across that I'm not understanding is the use case for having an @property with `syntax: '

  • @sixerd2236
    @sixerd2236 ปีที่แล้ว +1

    Hey some minor feedback on your audio. You should throw your audio into an EQ plugin or app and tune down the lower frequencies a bit. The bass is a little loud so when turning up the volume to hear you better my system is punching a little hard for some vocals (which my system is equalized to produce music so it's pretty flat).
    Great video and good information!

    • @KevinPowell
      @KevinPowell  ปีที่แล้ว +1

      Thanks for the feedback! Audio is a bit of a black art to me, but I can totally fix that :D (EDIT: might be a few weeks until you see a difference since many things are at a certain point in production already, but I'll make sure to adjust!)

  • @fullstackprojects5615
    @fullstackprojects5615 4 หลายเดือนก่อน

    Hey Kevin,
    Thanks for this. I was wondering how is you button centered in page? I was thinking there will be some classes you might have attached to button I don't see anyone. Have you added flex to button's parent container and then justify content center
    and align items centre? Just curious

  • @aswin.a7539
    @aswin.a7539 ปีที่แล้ว +2

    i'll put a comment before watching, this video is going to be cool as always.

  • @reactivicky
    @reactivicky ปีที่แล้ว +4

    We want hair tutorial

  • @amit_sheen
    @amit_sheen ปีที่แล้ว

    Another great video, as usual, and I'm glad I had a small part in it. ☺
    These are some great tips, and if anyone wants to go a little deeper into the negative delay thing, I have a part in one of my lectures where I tried to explain it in a more visual way. Feel free to take a look: th-cam.com/video/kXh3EMpaLFo/w-d-xo.html

  • @ajzack983
    @ajzack983 ปีที่แล้ว

    W tips

  • @itsfake8149
    @itsfake8149 ปีที่แล้ว

    Please cover the Gsap Library is possible, it will be very useful.

  • @sreeharipv486
    @sreeharipv486 ปีที่แล้ว

    Can we register custom properties in vanilla css by using @property method ??

  • @timgrei1730
    @timgrei1730 11 หลายเดือนก่อน

    You could do the n-th child delay in vanilla CSS with counters, right?

  • @lessons3141
    @lessons3141 ปีที่แล้ว

    This last tip about hovering gradient was amazing, is it crossbrowser solution?

    • @KevinPowell
      @KevinPowell  ปีที่แล้ว +1

      Safari has just added support, but no idea on where Firefox is with this at the moment :\

  • @frqstbite1001
    @frqstbite1001 ปีที่แล้ว

    does the king like comments

  •  2 หลายเดือนก่อน

    Are you human? AWESOME! 😁

  • @danko5678
    @danko5678 7 หลายเดือนก่อน

    I didn't remember that I had animation turned off in the system, probably did it for optimization. I don't agree that this should affect the animations in the browser

  • @samarthnagar1516
    @samarthnagar1516 ปีที่แล้ว

    do you use tailwind what are your views on it

  • @edehchinedu4554
    @edehchinedu4554 10 หลายเดือนก่อน

    you mind doing loading animation

  • @youcefg9760
    @youcefg9760 ปีที่แล้ว

    What's the theme you're using to have that kinda of effect on VSCode's open tabs?

    • @KevinPowell
      @KevinPowell  ปีที่แล้ว +1

      I'm using Atom One Dark

    • @youcefg9760
      @youcefg9760 ปีที่แล้ว

      @@KevinPowell Thanks man, keep up the good work, love your content.

  • @MrSmellyPotato
    @MrSmellyPotato ปีที่แล้ว

    is there any way I can polyfill so that I can use @property in safari or other browsers that does not support that?

    • @Killyspudful
      @Killyspudful ปีที่แล้ว

      Safari's going to support it very soon, but there's no way to polyfill it in CSS.

  • @HaiNguyen-zd6yj
    @HaiNguyen-zd6yj 2 หลายเดือนก่อน

    Hi sir, is there any solution for animation-delay not working with animation-timeline:view() ?
    Thank you!

    • @KevinPowell
      @KevinPowell  24 วันที่ผ่านมา

      Don't think you can delay, when it's scroll based, you'll just want to change the offsets for the view()

  • @jfftck
    @jfftck ปีที่แล้ว

    The problem with Houdini is none of the specifications are past draft stage and that can result in many issues in the future, that is why Mozilla doesn’t support it.

    • @KevinPowell
      @KevinPowell  ปีที่แล้ว

      Mozilla doesn't support it because their team was gutted and they have a much smaller budget than in the past.
      Chrome 100% was a bit too early on putting into production imo, but now with Safari getting behind @property as well, it is what it is at this point

  • @khumbomunsaka716
    @khumbomunsaka716 ปีที่แล้ว

    The links aren’t in the description.
    I don’t know if I am the only one that sees that.

    • @KevinPowell
      @KevinPowell  ปีที่แล้ว +1

      Oops! Sorry about that, I've just added them :)

  • @jfftck
    @jfftck ปีที่แล้ว

    I use “0%, 100%” to have a smooth infinite animation.

  • @JasonJA88
    @JasonJA88 ปีที่แล้ว

    I feel like Firefox is falling behind, Even its implementation of :has() cannot detect changes to the DOM.

    • @KevinPowell
      @KevinPowell  ปีที่แล้ว +1

      They gutted their team awhile back, so I think going forward it'll always be lagging by a bit, sadly.

    • @JasonJA88
      @JasonJA88 ปีที่แล้ว

      @@KevinPowell 😥

  • @websibaer
    @websibaer 7 หลายเดือนก่อน

    hmmm ... for me as a beginner in animation, that was totally spanish, not fully explained, too quickly jumped from line to line, and how javascript (which was not mentioned in the Title as beeing part of it) interfeares was by far not even guessable. hmm... spanish, chinese and cambodian, that is what I would answer, if you'd ask me how easy it is to understand.

  • @thegoldgamer6339
    @thegoldgamer6339 หลายเดือนก่อน

    why at his style is scss and not css

  • @Alexandra-ou1gl
    @Alexandra-ou1gl ปีที่แล้ว

    у меня был рюкзак с ноутом

  • @TheMetalMag
    @TheMetalMag 11 หลายเดือนก่อน

    What is this haircut? 😂

  • @user-og9nl5mt1b
    @user-og9nl5mt1b ปีที่แล้ว

    I'll ask ai to give me tips and follow those tips and order me a sandwich

  • @sudoscientist255
    @sudoscientist255 ปีที่แล้ว

    Great video but your shirt is triggering me lmaoo

    • @sudoscientist255
      @sudoscientist255 ปีที่แล้ว

      Holy crap, animating custom properties is awesome. Thank you for showing us!

  • @RT-yg6ec
    @RT-yg6ec 5 หลายเดือนก่อน

    made too many mistakes. guy sucks

    • @KevinPowell
      @KevinPowell  5 หลายเดือนก่อน

      😢

    • @RT-yg6ec
      @RT-yg6ec 5 หลายเดือนก่อน

      @@KevinPowell doesnt mean i dont respect u

    • @RT-yg6ec
      @RT-yg6ec 5 หลายเดือนก่อน

      ok, @KevinPowell i take it back, you rock. i'm sorry for saying you suck. you don't.
      thank you for your amazing content over the years. you are a global treasure. i'm just an asshole sometimes, and i shouldn't have said it.

  • @rodbrowning
    @rodbrowning ปีที่แล้ว

    Nice