Learn CSS Animations Tutorial

🎓 View our courses: scrimba.com/links/all-courses
Learn CSS Animations with Jad Khalili
💻 Full interactive course on Scrimba: rebrand.ly/gcssanimations
Learn how to make your websites come alive with CSS animations. This course gives you a solid foundation with real-world coding challenges.
Do you want to learn how CSS animations work, and know how to apply them to real-world scenarios? Good news, you've found the perfect course!
In just two hours, you will gain a fundamental understanding of the CSS properties that are used to create animations. You'll learn how to make user-friendly animations and how to apply them across browsers.
Along the course, there will be challenges with real-world examples that developers encounter in their daily lives, where you will be able to test and review what you learn.
⚡ Contents ⚡
00:00:00 - Welcome to the course!
00:05:13 - Project Navigation
00:07:13 - What are Transitions?
00:09:01 - Adding Transitions
00:14:45 - Customizing Transitions
00:20:45 - Transition Shorthand
00:24:25 - Transition Challenge
00:28:10 - Real-World Transitions Challenge: Menu
00:33:07 - Animations in Action
00:35:16 - Defining Animations
00:42:53 - Animations: Timing
00:47:11 - Animations: Other Properties
00:53:51 - Animation Shorthand
00:57:53 - Animation Challenge
01:01:17 - Real-World Animations Challenge: Landing Page
01:07:58 - Introduction to Transforms & Scaling
01:14:45 - Translation
01:20:05 - Rotation
01:23:52 - Skew
01:27:28 - Transform Challenge
01:33:01 - Real-World Transforms Challenge: Logo
01:42:13 - Prefixes
01:48:48 - CSS Variables
01:53:53- Custom Timing Functions
--
🏫 We are looking for teachers! rebrand.ly/become-scrimba-tea...
📚 We also blog! Follow our articles: dev.to/scrimba
💬 Join the Scrimba community chat: rebrand.ly/discord-invite
🤑 GET AN EXTRA 10% OFF SCRIMBA PRO SUBSCRIPTION
Follow this link to claim your discount (expires Dec 31 2023)
scrimba.com/pricing?coupon=Yo...

[@hariprasad467]

Thankyou Scrimba.This video teaches every single thing to be covered in animation

[@everythinggames1563]

This is the best video on animation on CZcams. I can beat my chest and say I understand animation now. Practiced each section step by step

[@shaniakc6985]

Hands down the best CSS animation course out there. Scrimba rocks

[@teencoder8504]

I was finding this kind of video for many days.... Best course

[@adilamin1107]

Thanks a lot, man. Your CSS animation tutorial is very helpful 😊

[@masudalimran92]

this video deserve a lot more likes and views than it has. really cleared up all my concepts of animation in css

[@lily-rx6xu]

literally the best video ive found on this topic, i cant believe you dont have more views .-.

[@abiolacomputing]

Thank you soo much for your time, I was doing Dave Gray CSS tutorial 11hrs which is also a great tutorial but I paused and completed this lesson, really appreciate your time and effort . Thank you soooooooo much

[@e.m.janssen3638]

Thanks so much for this. Just started learning HTML and CSS, and this video has been super helpful.

[@manigandane4133]

Thank You. The video is really helpful. The way of teaching was awesome.

[@lukakhorava2160]

I don't know what you're up to for the time being but you're clearly very underrated. Keep up a good work man!

[@ntwaliilian3506]

thank you for covering everything i need to know in css animation

[@Singh54321]

Oh my god !Why you not getting views?
Bro you are so good
I used to think i will never learn animations but bcz of you
I learned animation in 2 hours
Cant thanks enough.
Nailed it dude nailed it

[@kirstenanders8631]

Very helpful and detailed Video Course about CSS Animations which helped me to understand the animation technologies much better! Thanks a lot!

[@user-iq3dm5wx5r]

I am glad you put this video, saved my time!

[@IshaJoy]

Awesome video!! One thing I would consider would be, zoom into the page a bit, so I don’t have to squint my eyes. But other than that, I give it a 9 out of 10!! Thank you for teaching us!!

[@snaden3267]

Awesome video! Thank you for your explanation!

[@AntonioHaider]

Thanks. Very helpful tips

[@arek6296]

Thanks, I got well introduced.

[@NormieCyrox]

thanks for this awesome tutorial

[@LearnSomeCoding]

Based on content you not only deserve a like but also a subscription thanks paal❤

[@naomidesigner]

Thank you 🙌🙏

[@houshtoulback5710]

it was great. thanks❤

[@Karthik22ng]

Thanks a lot. God bless

[@jjjessee245]

Excellant teaching here.

[@fatinfuyad2816]

Nice Animation tutorial ❤❤

[@fatinfuyad2816]

Amazing ❤❤

[@sidharthsid3429]

Highly recommended if it's from scrimba

[@Scrimba]

Thanks very much :)

[@austinealagi]

thanks brother

[@nested9301]

hell yeah !

[@reactivicky]

Thank you. good video

[@Scrimba]

Glad it helped

[@webguru4216]

when i apply a transition to an element and when page loads for the first time , the transition automatically takes place how to over come this problem, i want transition to happen only when you hover over it, not when page loads

[@guntreddidhanunjayanaidu5121]

Sir, nice teaching, but unable see due to font size and very darkness.

[@oxygen2.781]

what is the name of this guy's channel and where to find his other courses please

[@somesaykosm732]

will that be a part of the scrimba frontend dev path? i'm on module 7(js) allready and animations are not mentioned so far.

[@Scrimba]

It's not in the Career Path but you can find our course here: scrimba.com/learn/cssanimations

[@keimakiri3238]

1:01:14

[@panka33]

I am at 36:00:00

[@solelyforeducationalpurposes60]

this guy is just shiposting with the animations man 😭😭😭

[@asmae-a771]

ur video is very helpful ty

[@zeeshanahmad8452]

Here you guys are providing the course on CZcams and on scrimba its paid, really?

[@clevermissfox]

It was free when I took the course on scrimba in Sept, maybe you caught them during a (drumroll please🥁)…TRANSITIONS!

[@alisayyad1560]

1:20:15

[@keimakiri3238]

24:10