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 !
CSS training table of contents (duration : 46m03s)
-
Introduction
- Welcome! free 00:01:03
- Course Requirements 00:01:09
- Exercises Files 00:01:07
-
CSS Transition Fundamentals
- The Transition Property 00:02:48
- Browser Support & Vendor Prefixes 00:02:27
-
CSS Transition Demonstrations
- Demonstrations Overview 00:00:17
- Blue to Red 00:03:50
- Square to Rectangle 00:03:31
- Square to Circle 00:03:17
-
Challenge: squeeze page
- Challenge Overview 00:00:27
- Animating Color Changes 00:02:59
- Fading Elements In & Out 00:04:19
-
Project: portfolio page
- Project Overview 00:00:58
- Navigation Bar : smooth transition effect 00:02:56
- Header - Creating a Mouseover Fade Effect 00:02:05
- About Section - Image Hover Effect 00:05:13
- The Gallery - Multiple Transition Effects 00:07:07
- Conclusion 00:00:30
- Sources Filesdownload
- Certificate
Instructor : Sandy Ludosky
-
With which software version is this tutorial compatible with?HTML
-
What is the required level to follow this tutorial ?beginner
