Lessons: 33Length: 4.8 hours
The days of animation-heavy websites are fading, but there is still something to be said for a site with small amounts of subtle, eye-catching motion to help users interpret interfaces. In this course, I will show you practical ways to create animations for buttons, pricing tables, and other web elements, using concise CSS and jQuery to do so.
Learn CSS: The Complete Guide
We've built complete guides to help you learn CSS and animate css, whether you're just getting started with the basics or you want to explore more advanced techniques.
1.Introduction
1.1Introduction00:30
1.1
Introduction
00:30
1.2CodePen02:26
1.2
CodePen
02:26
1.3Using External Libraries in CodePen04:16
1.3
Using External Libraries in CodePen
04:16
2.Animation Refreshers
2.1CSS Animation Refresher06:21
2.1
CSS Animation Refresher
06:21
2.2jQuery Animation Refresher08:48
2.2
jQuery Animation Refresher
08:48
3.Button Animations
3.1Styling Your Navigation11:16
3.1
Styling Your Navigation
11:16
3.2Simple Button Fades09:55
3.2
Simple Button Fades
09:55
3.3Animating Multiple Properties06:19
3.3
Animating Multiple Properties
06:19
3.4Before and After08:53
3.4
Before and After
08:53
3.5Background Swipe12:31
3.5
Background Swipe
12:31
3.6Background Swipe Variations06:28
3.6
Background Swipe Variations
06:28
3.7Text Scroll08:54
3.7
Text Scroll
08:54
3.8Setting Up Your Buttons09:56
3.8
Setting Up Your Buttons
09:56
3.9Expanding Buttons12:53
3.9
Expanding Buttons
12:53
3.10Setting Up 3D Buttons09:33
3.10
Setting Up 3D Buttons
09:33
3.11Animating the 3D Buttons09:55
3.11
Animating the 3D Buttons
09:55
3.12Subtle 3D Hover Effect06:47
3.12
Subtle 3D Hover Effect
06:47
4.Image Animations
4.1Basic Image Hover Effects11:31
4.1
Basic Image Hover Effects
11:31
4.2Images and Captions08:52
4.2
Images and Captions
08:52
4.3Animating the Images05:34
4.3
Animating the Images
05:34
5.Other Web Elements
5.1Floating Form Labels06:07
5.1
Floating Form Labels
06:07
5.2Animating the Labels11:03
5.2
Animating the Labels
11:03
5.3Animated Panels12:02
5.3
Animated Panels
12:02
5.4Panels and Bullets13:09
5.4
Panels and Bullets
13:09
5.5Styling the Pricing Tables12:50
5.5
Styling the Pricing Tables
12:50
5.6Creative Product Selection12:05
5.6
Creative Product Selection
12:05
6.Bonus Projects
6.1Responsive Animation06:33
6.1
Responsive Animation
06:33
6.2Image Animations10:29
6.2
Image Animations
10:29
6.3CSS Slider09:41
6.3
CSS Slider
09:41
7.Bonus Projects II
7.1Background Animation10:01
7.1
Background Animation
10:01
7.2Spinning Buttons09:33
7.2
Spinning Buttons
09:33
7.3Submit Button Animation14:16
7.3
Submit Button Animation
14:16
8.Conclusion
8.1Final Thoughts00:39
8.1
Final Thoughts
00:39
