Learn CSS Animations Tutorial

🎓 View our courses: https://scrimba.com/links/all-courses

Learn CSS Animations with Jad Khalili

💻 Full interactive course on Scrimba: https://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! https://rebrand.ly/become-scrimba-tea...

📚 We also blog! Follow our articles: https://dev.to/scrimba

💬 Join the Scrimba community chat: https://rebrand.ly/discord-invite

🤑 GET AN EXTRA 10% OFF SCRIMBA PRO SUBSCRIPTION
Follow this link to claim your discount (expires Dec 31 2023)
https://scrimba.com/pricing?coupon=Yo...