CSS - MASTERING ANIMATIONS
4.6 (363 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
15,622 students enrolled

CSS - MASTERING ANIMATIONS

Make your web page alive with css animations & transitions and take your web design skills to the next level
4.6 (363 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
15,622 students enrolled
Created by Driss Boumlik
Last updated 3/2020
English
English [Auto]
Current price: $37.99 Original price: $54.99 Discount: 31% off
5 hours left at this price!
30-Day Money-Back Guarantee
This course includes
  • 2 hours on-demand video
  • 1 article
  • Full lifetime access
  • Access on mobile and TV
  • Assignments
  • Certificate of Completion
Training 5 or more people?

Get your team access to 4,000+ top Udemy courses anytime, anywhere.

Try Udemy for Business
What you'll learn
  • Animating colors, shadows.. moving things around & rotating them ...etc
  • Controlling 100% your animation and even before and after the animation execution.
  • Create awesome Menus, checkboxs, Spinners, step by step forms
Course content
Expand all 28 lectures 01:55:59
+ Transition Property
1 lecture 03:10
4-Transition Property explained
03:10
+ Tools You Need To Code + Course Files To Download
2 lectures 03:37
5-Tools you need to code
03:27
6-Tools You Need To Code + Course Files To Download
00:10
+ Transition Property - Practice
7 lectures 44:34
8-Enough with those ugly checkbox - Part 1
05:24
9-Enough with those ugly checkbox - Part 2
07:47
10-Enough with those ugly checkbox - Part 3
05:13
11-Making an animated progress bar
02:58
12-Let's move that wheel
07:22
13-Step by step form
09:22
+ Keyframes & Animation property
2 lectures 09:04
14-Keyframes explained
06:47
15-Animation property explained
02:17
+ Keyframes & Animation property - Practice
6 lectures 27:09
17-Let' create some fancy drop down menu - Part 2
02:54
18-Let' create some fancy drop down menu - Part 3
02:42
19-That moon isn't spinning
04:31
In this project we will create a pacman that moves back and forth on a path, and moves his mouth to make it look like he's eating dots ( like the game ). Don't forget to share your work. so you can have feedback. Also, if you have any questions don't hesitate to contact me. Thank you for all the.
The Lost PAC-MAN
2 questions
20-The lost PAC-MAN - Part 1
05:01
21-The lost PAC-MAN - Part 2
04:24
+ Box game
6 lectures 23:06
Preparing the markup & styles for the game
06:47
Rotating the box - first steps
05:58
Styling he play button
01:16
When the game stops
03:33
Styling the box by result
03:41
Updating the game score
01:51
Requirements
  • A basic knowledge of HTML( tags, html markup structure, referencing styles )
  • A basic knowledge of CSS (styling elements,css properties, selectors)
Description

The course is about css animations and how to make beautiful animations only with css, It so easy to make interactive elements on your web page using css animation properties + transitions.

We will cover the animation concept and what are the properties that you can / can't animate and what's recommended to animate specially when it' about performance.

Next, we will get our hands to code and practice, so we can master these concepts.

Who this course is for:
  • Beginner web developers
  • Beginner web designers