CSS Animations: Create Amazing Effects on Your Website
4.8 (48 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.
376 students enrolled
Wishlisted Wishlist

Please confirm that you want to add CSS Animations: Create Amazing Effects on Your Website to your Wishlist.

Add to Wishlist

CSS Animations: Create Amazing Effects on Your Website

Learn how to create amazing effects using CSS transitions and transformations
4.8 (48 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.
376 students enrolled
Created by Alexander Oni
Last updated 6/2017
English
Current price: $10 Original price: $50 Discount: 80% off
5 hours left at this price!
30-Day Money-Back Guarantee
Includes:
  • 3 hours on-demand video
  • 20 Supplemental Resources
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
What Will I Learn?
  • Create amazing effects using CSS transitions and transformations
  • Write 3D animations
View Curriculum
Requirements
  • HTML and CSS basics
  • Text editor e.g Notepad ++
Description

Have you ever wanted to learn how to add cool effects to your website without the need to write complicated code? Gone are the days when adding effects and animations to your website would require either java-script or J Query code. With the introduction of CSS 3, you can now create amazing effects using CSS transitions and transformations that will bring a lot of life and vibrancy to your website. 

This course will teach you how to change the way elements behave when they are hovered over or when they are clicked on. You will learn how to work with elements from both 2D and 3D perspectives.

In the first section, you will learn about CSS transitions. You will learn the 4 main properties that will allow you to control what animatable properties you want to transition as well as set timing and control effects for them.

The second section will introduce you to CSS transforms. With CSS transforms, you will learn how to create shapes of different formats and styles from elements on your webpage. You will learn useful transformation functions such as skew, scale, rotate and much more. You will also learn how to combine transformations and transitions thus creating very interesting animations.

In the third section, you will learn about how you can take your transformations to the next level by learning how to create transformations from a 3D perspective. You will learn the differences between the 2D and 3D spaces and what it takes to prepare your elements on the website to be ready for 3D transformations.

By the end of this course, you will have all the necessary tools and knowledge to write beautiful animations that will make your website enticing and exciting to any visitor.

Who is the target audience?
  • Students who want to learn about CSS Transitions and Transformations
  • Students who want to learn how to write 3D animations
Compare to Other CSS Courses
Curriculum For This Course
38 Lectures
03:04:55
+
Welcome
3 Lectures 07:30

Udemy Tips and Asking Questions
04:08

+
CSS Transitions
11 Lectures 55:27

Transitions are a fantastic and effective way of adding some life and action to your website. In this video, you will learn exactly what they are and how are they are triggered.

Preview 03:05

Here you will learn how to write your very first transition when a user hovers over a button using the transition duration function

Preview 07:07

Let's test your ability to use the transition-duration property.

Exercise 1
01:24

Exercise 1 - Solution
03:21

In this video, you will learn how to target specific properties to transition by using the Transition-Property declaration.

Working with the Transition Property
03:08

How do we know what properties we can animate or add transitions to? You will find out in this video

Preview 05:16

Transition delays are a powerful way of controlling the duration of your transitions. Find out more about them in this video.

Using the Transition-Delay Function to Control a Transition's Start Time
06:38

In this video, you will learn how to add more effects and animation to your transitions by controlling the speed in which they transition.

Change a Transition's Speed with Timing Functions
11:35

Here, you will learn to transition multiple properties at the same time thus creating really interesting animations.

How to Transition Multiple Properties
05:08

In this video you will learn how to write your transitions with minimal CSS code by using the transition shorthand.

The CSS Transition Shorthand
07:44

Section Revision
01:01

This quiz aims to test your knowledge of everything that you have learnt so far in this section.

Good luck

Quiz 1 - Section Quiz
5 questions
+
CSS Transformations
12 Lectures 58:59

In this video, you will write your first transformation by learning how to rotate elements.

Preview 05:26

By combining transformations and transitions, you can create very exciting animations on your website. Find out more in this video.

Preview 04:56

In this video, you will learn about a powerful transformation property known as the skewing function.

Preview 05:19

Exercise 2
01:56

Exercise 2 - Solution
06:22

Scaling elements can be a very useful animation on your website. Find out more in this video.

How to Scale Elements
06:49

In this video, you will learn how to change the angle and sides from which elements on your website transform from.

How to Change Transform Position with transform-origin
08:07

Lab -1
02:39

In this video, you will learn how to move elements from their original position either vertically or horizontally.

Using the translate() to Move Content
05:08

By combining transforms, you can begin to create truly exciting animations on your website. This video will show you how to do so.

Combining Transforms
03:23

In this video, you will learn how to create your very own custom timing function by using the cubic bezier function.

Custom Timing Function with Cubic Bezier()
07:44

Section Revision
01:10

A quiz to test your knowledge 

Section Quiz
4 questions
+
Working with 3D Effects
11 Lectures 01:02:01

3D transforms are a whole new level of transformations because they introduce a third axis (Z axis). This video will introduce you to this new concept.

Introduction to 3D transforms
03:31

In order to prepare your elements for 3D transformations, you first need to activate the 3D perspective. Find out more about this in this video.

Activating the 3D Space
07:01

Take your rotations to a whole new level by learning how to rotate elements from a 3D perspective.

3-D Dimensional Rotations
04:27

Lab 2 - Creating a Gallery with Flipping Images
10:52

In this video, you will learn how to change the angle from which elements are viewed on from a 3D perspective.

Changing the View Point with Perspective Origin
03:27

In this video, you will learn how to ensure that all your elements transform from the same perspective thus creating a consistent 3D transformation.

Preview 02:16

In this lengthy lab exercise, you will combine everything you have learned so far to create a rotating cube gallery.

Lab 3 - Build a Rotating Cube Gallery
13:16

In this video, you will learn how to move elements from their original position on a 3D perspective.

Working with the Translate3d Function
02:24

Section Revision
01:48

COURSE PROJECT
04:56

FINAL PROJECT REVIEW
08:03
+
Conclusion
1 Lecture 00:58
Conclusion
00:58
About the Instructor
Alexander Oni
4.6 Average rating
1,213 Reviews
23,206 Students
15 Courses
Web & WordPress Developer, Cyber-security Expert

Hi there my name is Alexander Oni and welcome to my Udemy page. I am a professional web developer living in the United States of America. I currently work for a small web development company where I build websites for clients using the latest in web technology.

I have been building websites for the past 7 years now and have been working exclusively with WordPress for almost 4 years. My love for web development and teaching people how to build websites drove me to make my Udemy course on web development.

I am also a cyber security expert and have a masters degree in Information Security.

I enjoy watching football, movies and playing chess.