Web animations, Bringing your UIs to life | Fabio Cortés | Skillshare

Web animations, Bringing your UIs to life

Fabio Cortés, Creative developer

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

      0:21
    • Transitions - Syntax

      6:41
    • Transitions - Example

      3:11
    • Transform - Rotate

      4:43
    • Transform - Translate

      1:00
    • Transform - Scale

      0:40
    • Transform - Skew

      0:41
    • Transform - Origin

      1:40
    • Animations - Syntax

      6:08
    • CSS Animatable properties

      0:18
    • Animation - Example

      13:46
    • Preparing Class project

      4:20
    • Class project

      12:08
    • Resources

      1:10

About This Class

Design is in the details.

Microinteractions are those tiny details that can make the experience between a user and a device more fun and easy, bridging the gap between them through an emotional and human connection.

This little moments can help us guiding our users through a flow in an intuitive and effective way.

In this class, you will learn how to make your users love your website using single web animations. It’s project-oriented with hands-on examples, and will help you with the most fundamental concepts of web animation.

Just need a basic understanding of HTML and CSS.

Let’s bring your UIs to life!

138

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.

Fabio Cortés

Creative developer

Hey! I'm Fabio Cortes, I'm a Creative Developer, teacher and speaker.

Right now I'm mostly working with Node.js, Processing and Generative Art.

My passions are reading, running and music, specially Pantera! #CFH

See full profile

Report class