Learn CSS Animations in 9 Minutes

Learn CSS animations in 8 minutes | Animations Crashcourse | every animation property explained | Loading Animation Project Tutorial
Become a Member to Support our Channel:
👉 / @coding2go
Visit our Website for courses, projects, tutorials + code examples
👉coding2go.com
Deploy your own website with Hostinger
👉 www.hostinger....
🔥 Discount Code: CODING2GO
Sources / Credits to:
- developer.mozi...
- www.smashingma...
In this tutorial, you'll learn:
- What CSS animations are and why they're useful
- How to create simple CSS animations using @keyframes
- When to use css transitions and animations
- How to play css animations with javascript
These CSS animations properties will be explained in the video:
animation-name: spin
animation-duration: number in s
animation-timing-function: linear, ease, ease-in, ease-out, ease-in-out
animation-delay: number is s
animation-direction: normal, reverse, alternate
animation-iteration-count: number, infinite
animation-fill-mode: forwards
animation-play-state: running, paused
Example for animation shorthand:
animation: 3s spin ease-in-out 1s infinite alternate running;
Background Music:
Track: "Little Things"
Music provided by Slip.stream
Free Download/Stream: get.slip.strea...
Like and subscribe for more tutorials like this ✌️

[@giftmukupe1]

Free education yet so powerful.

[@Naxity]

So truuuuuuuuuuuuuue.

[@pharaoh9483]

Extremely underrated channel, I just found out our channel and its very useful!!

[@coding2go]

Thank you, I hope we grow in the future 💙

[@pharaoh9483]

@@coding2go oops, I made I typo, I meant to say “your channel”. But like I said, your channel proved to be extremely useful when I was looking at the “before::after” video, I wanted to create those lines that appear/grow under navbar links when hovered, and I managed to do it with the video as a reference. Your videos are simple and straight-forward and I like that!

[@vinHack]

wow i love this channel, could learning be easy like this

[@cubesolver543]

OMG!! You are Great Now I Can Make Many Animations using css ThankYou!!

[@creditguider]

Its not the coding that is hard, its about being creative hahaha 😂

[@danushadhaamarasekera7215]

really apprciate your kind heart , hope there will be more people like you

[@sebastianlozano7707]

I was always afraid of animations with css. Thanks to your video I feel more comfortable with it! Thanks so much Crack!

[@balisha100]

i realy liked the challenge in the last part, you should do it more

[@jaredsotolizama3301]

Excellent, thank you very much!

[@nazeducationcenter9391]

Excellent way of teaching ❤great work and thanks 👍

[@lonelomessi]

Absolute gold

[@amishashravage7]

Your videos are too good , im learning alot ❤

[@johnnybravo5635]

simple, easy to remember, i like it

[@ahmedbashir2307]

Such an awesome tutorial.

[@GabbyEdema]

what if i want to use this kind of animation for my loading screen on my website how do i make it fade away when done ( which would show my index html)

[@kugavarathanNavaraththinarasa]

thank you sir for your video

[@mster067]

What a great video!

[@hasanhaskic8893]

Thanks!!

[@thisyearOL]

perfect!

[@Runkang10]

Good video. 👍

[@shock2k3]

good t o learn

[@jirkakvasnicka9654]

💯💯💯💯💯💯💯💯💯💯💯💯