Creating Animations with CSS

Lesson 1, Step 1: Introduction

Download zip Diff changes Checkout lesson1.1 What's this?

Sign up to continue

Courses Outline

Lesson 1: Animating in the Browser

Free

Introduction

1:47

Why Animate our UI?

2:19

Principals of Animation

3:03

Setting up our Environment

2:18

Why Not Javascript?

2:08

Lesson 2: Transitions - From A to B

Introduction to Transitions

3:09

Activating Transitions

7:06

Lesson 3: Keyframe Animations

Creating Keyframes

7:07

Using Keyframe Animations

13:15

Quiz

Lesson 4: Easing and Timing Functions

Introduction to Timing Functions

2:13

Using Easing and Cubic Bezier Curves

8:06

Lesson 5: Putting it all Together

When to Use Transitions, When to Use Animations

2:26

Multiple Transitions

3:12

Multiple Animations

3:33

Activating Animations on Scroll

3:56

Quiz

Lesson 6: Browser Considerations

Browser Compatibility

5:20

Performance Considerations

4:35

Lesson 7: Accessibility and Animations

Minimising Distraction and Motion Sickness

3:09

Quiz

Lesson 8: Course Conclusion

Wrap up and next steps

1:05

Join SitePoint Premium to download this course