Interactive Web Design with CSS Transition
Playing problem
This video does not seem to be available
Sous-titres non disponibles

VIDEO TUTORIAL Interactive Web Design with CSS Transition

Sandy Ludosky
Buy now, pay later. Learn more

Unlimited download & streaming

Satisfied or refunded

100% secure payment

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 video 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.

In this Interactive Web Design with CSS Transition video tutorial you'll learn

  • 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.

  • If you are developer, you will know how to create nice animation effect with CSS.
  • If you are a designer, you will take your CSS skills to the next level and learn to add interactivity to a web page without jQuery

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

What will you learn in this course?

Course plan
Chapter 1
Chapter 2
CSS Transition Fundamentals
Chapter 3
CSS Transition Demonstrations
Chapter 4
Challenge: squeeze page
Chapter 5
Project: portfolio page

Detailed course plan

Chapter 1 : Introduction
Lesson 1Welcome!
Lesson 2Course Requirements
Lesson 3Exercises Files
Chapter 2 : CSS Transition Fundamentals
Lesson 1The Transition Property
Lesson 2Browser Support & Vendor Prefixes
Chapter 3 : CSS Transition Demonstrations
Lesson 1Demonstrations Overview
Lesson 2Blue to Red
Lesson 3Square to Rectangle
Lesson 4Square to Circle
Chapter 4 : Challenge: squeeze page
Lesson 1Challenge Overview
Lesson 2Animating Color Changes
Lesson 3Fading Elements In & Out
Chapter 5 : Project: portfolio page
Lesson 1Project Overview
Lesson 2Navigation Bar : smooth transition effect
Lesson 3Header - Creating a Mouseover Fade Effect
Lesson 4About Section - Image Hover Effect
Lesson 5The Gallery - Multiple Transition Effects
Lesson 6Conclusion


Your questions about the course

With which software version is this tutorial compatible with?


What is the required level to follow this tutorial ?


Pay later

Purchase price: 19,00 €
To pay later, select Klarna as your payment method at checkout.

Add items to your cart

Select Klarna at checkout

Receive an authorization

Pay in 30 days

Klarna : terms of use of deferred payment.

Wait ! 🤗

Access more than 19 free tutorials

Our data protection policy