Lessons:19Length:2 hours

For full access to all 19 lessons, including source files, subscribe with Elements.
- Overview
- Transcript
4.4 Animating on Breakpoints
With your initial styles in place, it’s time to create your animations. In this lesson you’ll set up your animations to trigger when different breakpoints are hit.
1.Introduction2 lessons, 06:43
2 lessons, 06:43
Free Lesson 1.1Introduction01:25
Free Lesson
1.1
Introduction
01:25
Free Lesson 1.2What are Media Queries?05:18
Free Lesson
1.2
What are Media Queries?
05:18
2.Media Query Basics4 lessons, 26:21
4 lessons, 26:21
2.1Viewport Width04:03
2.1
Viewport Width
04:03
2.2Simplifying Designs for Print10:09
2.2
Simplifying Designs for Print
10:09
2.3HTML and CSS Media Queries08:38
2.3
HTML and CSS Media Queries
08:38
2.4Introduction to Media Types03:31
2.4
Introduction to Media Types
03:31
3.Using Widths6 lessons, 50:04
6 lessons, 50:04
3.1Max-Width Media Queries11:02
3.1
Max-Width Media Queries
11:02
3.2Resizing Content Based on Width07:58
3.2
Resizing Content Based on Width
07:58
3.3Styling the Menu11:04
3.3
Styling the Menu
11:04
3.4Creating a Menu Button05:46
3.4
Creating a Menu Button
05:46
3.5Making the Menu Animate08:49
3.5
Making the Menu Animate
08:49
3.6Logical Operators05:25
3.6
Logical Operators
05:25
4.Other Media Features4 lessons, 21:55
4 lessons, 21:55
4.1Resolution Features04:16
4.1
Resolution Features
04:16
4.2Orientation and Aspect Ratio09:54
4.2
Orientation and Aspect Ratio
09:54
4.3More Media Features04:03
4.3
More Media Features
04:03
4.4Animating on Breakpoints03:42
4.4
Animating on Breakpoints
03:42
5.Conclusion3 lessons, 15:58
3 lessons, 15:58
5.1Targeting Older Browsers07:57
5.1
Targeting Older Browsers
07:57
5.2The Future of Media Queries07:18
5.2
The Future of Media Queries
07:18
5.3Final Thoughts00:43
5.3
Final Thoughts
00:43
Continue watching with Elements
Continue watching with Elements