CSS3 Animations with Transitions & Transforms | Kirsten Swanson | Skillshare

CSS3 Animations with Transitions & Transforms

Kirsten Swanson, A Curious & Creative Frontend Developer

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
14 Videos (22m)
    • Introduction

      1:47
    • Project Overview

      1:05
    • CSS Animations Overview

      1:24
    • Transitions Description

      0:50
    • Transition Properties

      1:55
    • Transforms Description

      1:06
    • CSS Selector & Property Review

      1:19
    • Transition Examples

      3:10
    • Adding Vendor Prefixes for Older Browsers

      0:37
    • Transform Rotate Example

      1:18
    • Transform Skew Example

      1:24
    • Transform Scale Example

      1:16
    • Transform Translate Example

      3:54
    • Combining Multiple Transforms

      0:40
11 students are watching this class

About This Class

In this course, you'll learn about CSS3 animations with transitions and transforms. Your project will be creating an interactive collage of animated icons. Icons will be positioned absolute upon a background and will have hover animations applied. Going into this course you should be familiar with the basics of CSS properties and selectors. 

This is a great course if you're looking to add some delightful moments to your UI. 

Presentation Resources: 

Can I UseCubic Bezier Cheat SheetMDN CSS Animation Properties

Codepen Examples: 

Transition Examples, Transform Rotate Example, Transform Skew Example, Transform Scale Example, Transform Translate ExampleCombining Multiple Transforms

Animated Images Example:

Github Repository, Live Example

144

Students

--

Projects

  • --
  • Beginner
  • Intermediate
  • Advanced
  • All Levels
  • Beg/Int
  • Int/Adv

Level

Community Generated

The level is determined by a majority opinion of students who have reviewed this class. The teacher's recommendation is shown until at least 5 student responses are collected.

Kirsten Swanson

A Curious & Creative Frontend Developer

Hello world, my name is Kirsten. I'm a Front-End Developer with a keen eye for design and an adventurous spirit. I'm continuously learning and teaching others along the way. 

See full profile

Report class