Interactive Web Design with CSS Animation & Transition
4.5 (16 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
192 students enrolled
Wishlisted Wishlist

Please confirm that you want to add Interactive Web Design with CSS Animation & Transition to your Wishlist.

Add to Wishlist

Interactive Web Design with CSS Animation & Transition

Bring life to your webpage and impress your users with CSS transition
4.5 (16 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
192 students enrolled
Created by Sandy Ludosky
Last updated 6/2015
English
Current price: $10 Original price: $35 Discount: 71% off
22 hours left at this price!
30-Day Money-Back Guarantee
Includes:
  • 1 hour on-demand video
  • 6 Articles
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
Have a coupon?
What Will I Learn?
Creating and adding smooth transition using the transition properties
Fading elements in and out using the opacity and transition properties
Understanding browser support and performance with the CSS3 vendor prefixes
Animating property changes with CSS transition
Using the timing-function property (ease-in, ease-out, ease-in-out, linear....) to control the animation of the speed
View Curriculum
Requirements
  • A working knowledge of HTML and CSS is preferred
  • Understanding of the :hover trigger state
Description

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.
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.
Who is the target audience?
  • Anyone willing to add interactivity to a website and create animation with CSS3 only (no jQuery required)
  • Developers and Designers looking at extending their CSS skills
Students Who Viewed This Course Also Viewed
Curriculum For This Course
Expand All 24 Lectures Collapse All 24 Lectures 53:47
+
Introduction
5 Lectures 04:21


Course requirements
01:08

What you need to get started
00:31

You can download the course files zip folder in Lecture 5. Click on View resources in the upper right corner to find the zip folder.

Exercice Files
01:07
+
CSS Transition Fundamentals
3 Lectures 05:37
The transition property
02:48

Browser support and Vendor Prefixes
02:26

CSS syntax | Transition properties & Vendor prefixes
00:23
+
CSS Transition demonstrations
5 Lectures 12:51
Demos overview
00:16


Square to rectangle
03:31

Square to circle
03:16

Animatable properties
01:58
+
Challenge - Squeeze page
4 Lectures 08:51
Challenge overview
00:27


Animating color changes
02:59

Fading elements in and out
04:19
+
Project : portfolio
7 Lectures 18:48

Course Materials
00:02

Navigation Bar : smooth transition effect
02:55

Header - Creating a Mouseover Fade Effect
02:05

About Section - Image Hover Effect
05:13

The Gallery - Multiple Transition Effects
07:06

Conclusion
00:30
About the Instructor
Sandy Ludosky
4.3 Average rating
1,133 Reviews
15,861 Students
20 Courses
Web Designer & Developer

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

I specialize in Front-End development with 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 being a Udemy instructor, I am an avid learner of new technologies and digital stuff.