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-teacher
๐ 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
Watch on YouTube โ
(saves to browser)
Sign in to unlock AI tutor explanation ยท โก30
Playlist
Uploads from Scrimba ยท Scrimba ยท 0 of 60
โ Previous
Next โ
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
CSS Grid Course: Learn the Basics in 3 Minutes
Scrimba
CSS Grid Course: Positioning Items
Scrimba
CSS Grid Course: Why Learn It And How It Compares To Bootstrap
Scrimba
CSS Grid Course: auto-fit & minmax
Scrimba
CSS Grid Course: Implicit Rows
Scrimba
CSS Grid Course: Fraction Units And Repeat
Scrimba
CSS Grid Course: Justify Items and Align Items
Scrimba
CSS Grid Course: An Awesome Image Grid
Scrimba
CSS Grid Course: Named Lines
Scrimba
CSS Grid Course: auto-fit vs auto-fill
Scrimba
CSS Grid Course: Justify Content and Align Content
Scrimba
CSS Grid Course: Template areas
Scrimba
27. Setting up the structure - Responsive CSS Tutorial
Scrimba
25. Making the navigation responsive - Responsive CSS Tutorial
Scrimba
36. Playing with the title's position and negative margins - Responsive CSS Tutorial
Scrimba
31. Starting the CSS for our page - Responsive CSS Tutorial
Scrimba
26. Taking a look at the rest of the project - Responsive CSS Tutorial
Scrimba
15. Spacing out the columns - Responsive CSS Tutorial
Scrimba
33. Starting to think mobile first - Responsive CSS Tutorial
Scrimba
22. Making our navigation look good - Responsive CSS Tutorial
Scrimba
37. Changing image size with object-fit - Responsive CSS Tutorial
Scrimba
44. Module Wrap up - Responsive CSS Tutorial
Scrimba
16. Controlling the vertical position of flex items - Responsive CSS Tutorial
Scrimba
39. Setting up the widgets and talking breakpoints - Responsive CSS Tutorial
Scrimba
42. Setting up the About Me page - Responsive CSS Tutorial
Scrimba
35. Changing the visual order with flexbox - Responsive CSS Tutorial
Scrimba
23. Adding the underline - Responsive CSS Tutorial
Scrimba
21. Using flexbox to start styling our navigation - Responsive CSS Tutorial
Scrimba
20. Creating a navigation - Responsive CSS Tutorial
Scrimba
40. Using a new pseudo class to wrap up the homepage - Responsive CSS Tutorial
Scrimba
43. Fixing up some loose ends - Responsive CSS Tutorial
Scrimba
32. Starting the layout. Looking at the big picture - Responsive CSS Tutorial
Scrimba
24. A more complicated navigation - Responsive CSS Tutorial
Scrimba
28. Feature article structure - Responsive CSS Tutorial
Scrimba
34. Styling the featured article - Responsive CSS Tutorial
Scrimba
18. Making layout responsive with flex direction - Responsive CSS Tutorial
Scrimba
19. flex direction explained - Responsive CSS Tutorial
Scrimba
41. Creating the recent posts page - Responsive CSS Tutorial
Scrimba
17. Media Query basics - Responsive CSS Tutorial
Scrimba
30. Home Page. HTML for the aside - Responsive CSS Tutorial
Scrimba
38. Styling recent articles for large screens - Responsive CSS Tutorial
Scrimba
29. The home page. HTML for the recent articles - Responsive CSS Tutorial
Scrimba
10. ems and rems an example - Responsive CSS Tutorial
Scrimba
1. Starting to think responsively - Responsive CSS Tutorial
Scrimba
4. Controlling the width of images - Responsive CSS Tutorial
Scrimba
5. min width and max width - Responsive CSS Tutorial
Scrimba
3 CSS Units. Percentage - Responsive CSS Tutorial
Scrimba
11. Flexbox refresher and setting up some HTML - Responsive CSS Tutorial
Scrimba
12. Basic Styles and setting up the columns - Responsive CSS Tutorial
Scrimba
8. The Solution Rems - Responsive CSS Tutorial
Scrimba
14. Setting the columns widths - Responsive CSS Tutorial
Scrimba
2 CSS Units - Responsive CSS Tutorial
Scrimba
7. The problem with ems - Responsive CSS Tutorial
Scrimba
6. CSS Units. The em unit - Responsive CSS Tutorial
Scrimba
13. Adding the background color - Responsive CSS Tutorial
Scrimba
9. Picking which unit to use - Responsive CSS Tutorial
Scrimba
Tutorial to Learn Alpine JS - Full Course for Beginners
Scrimba
Guide To Algorithms in Javascript [Binary Search] - Full Course / Tutorial
Scrimba
Learn UI Design [7 Fundamentals Tutorial] - Full Course for Beginners
Scrimba
Javascript Tutorial for Beginners [From 0 to ES6+] - Full Course
Scrimba
Related AI Lessons
Chapters (23)
Welcome to the course!
5:13
Project Navigation
7:13
What are Transitions?
9:01
Adding Transitions
14:45
Customizing Transitions
20:45
Transition Shorthand
24:25
Transition Challenge
28:10
Real-World Transitions Challenge: Menu
33:07
Animations in Action
35:16
Defining Animations
42:53
Animations: Timing
47:11
Animations: Other Properties
53:51
Animation Shorthand
57:53
Animation Challenge
1:01:17
Real-World Animations Challenge: Landing Page
1:07:58
Introduction to Transforms & Scaling
1:14:45
Translation
1:20:05
Rotation
1:23:52
Skew
1:27:28
Transform Challenge
1:33:01
Real-World Transforms Challenge: Logo
1:42:13
Prefixes
1:48:48
CSS Variables
๐
Tutor Explanation
DeepCamp AI