CSS Animation & Transitions

Sandy Ludosky

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
19 Videos (47m)
    • Welcome!

    • Course Introduction

    • Course requirements

    • Course Files

    • The transition property

    • Browser support & CSS vendor prefixes

    • Demos - overview

    • Blue to red

    • Square to rectangle

    • Square to circle

    • Squeeze page - overview

    • Animating color changes

    • Fading element in and out

    • Project - overview

    • The navigation bar: smooth transition

    • The header : fadein/out mouseiover effect

    • About section : image hover effect

    • The gallery: multiple transition effects

    • [transition] conclusion


About This Class

With the CSS3 transition properties, it is possible and easy to add interactivity and enhance the user experience of your webpage by using CSS only. CSS3 transitions allows you to change property values smoothly over a given duration.

In this course, we will explore the different options of animation techniques that you can use to bring elegant animations and life to a webpage.

The course covers a range, from simple to complex, of demonstrations and examples that you can use in your own work or project to impress your audience.

The course also includes a challenge assignment as well as a final project to apply what you have learned and put all of it in practice.

Topics include:

  • The CSS transition fundamentals
  • The transition properties
    • transition-duration
    • transition-delay
    • transition-timing-function
  • Browser support and performance with the CSS vendor prefixes
  • A challenge assignment
  • Project : a portfolio page

You will learn how to:

  • Create smooth transition to animate property changes
  • Use the shorthand
  • Use the transition-timing-function to control the speed of the curve
  • Animate color changes
  • Fade elements in and out
  • Create multiple transition effects

By the end of the class, your will be able to use the concepts and examples presented to impress your audience with fancy animation effects.

Join me in ICSS Animation & Transition to learn how to create an enhanced user experience and take your web design skills to the next level with CSS transition.

15 of 18 students recommendSee All

This class was exactly what I was looking for. I use WordPress themes to create websites but enjoy customising them as much as I can. I've been using basic CSS to tailor the themes and get what I want but this has now taken me to the next level. I look forward to implementing these techniques!
Great indroduction to CSS Animation & Transitions. I could be able to expand my knowledge and apply to my own website.
Luis Vasquez

Welcome to the 3D World!

Really cool CSS techniques explained in a very simple, easily understandable way. Plus, love the instructor's cool accent! ;-)
Stephanie Hudson

Head Geek





My name is Sandy. I am a freelance Web Designer and Developer based out of Toronto, in Ontario, Canada.

I specialize in Front-End using HTML, CSS, CSS3 Animation, Sass, Javascript and JQuery.

I love creating beautiful, professional and user-friendly websites using the Adobe Creative Suite: Photoshop, Illustrator and Flash to name a few.

Also, I am keen on Web marketing, Web analytics, Visual Design, Video Editing, Photography and WordPress development.

On top of be...

See full profile