Sorry, your browser is not supported
To have the best experience using Skillshare, we recommend that you use one of these supported browsers.

Web animations, Bringing your UIs to life

Fabio Cortés, UI Engineer

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!

79

Students

--

Projects

Fabio Cortés

UI Engineer

Hey! I'm Fabio Cortes, I'm a hardware engineer, teacher and speaker.

Right now I'm mostly working with Node.js.

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

See full profile