CSS - MASTERING ANIMATIONS

Make your web page alive with css animations & transitions and take your web design skills to the next level

Created byDriss B

Last updated 3/2020

English

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

9 sections • 28 lectures • 1h 55m total length

About The instructor0:35
Meet the instructor, a web developer who teaches programming and guides you through serious CSS animations. The course assumes science knowledge and how elements work to apply animation principles.

7-CSS Transition - Let' practice6:28
8-Enough with those ugly checkbox - Part 15:24
9-Enough with those ugly checkbox - Part 27:47
10-Enough with those ugly checkbox - Part 35:13
11-Making an animated progress bar2:58
12-Let's move that wheel7:22
learn to create a spinning wheel animation with css by building a spinner container, adding a dashed green border, and applying transform rotate and translate with hover transitions.
13-Step by step form9:22

16-Let' create some fancy drop down menu - Part 17:37
17-Let' create some fancy drop down menu - Part 22:54
18-Let' create some fancy drop down menu - Part 32:42
19-That moon isn't spinning4:31
Mastering animations in CSS demonstrates building a spinner with a :before element, absolute positioning, and keyframes to rotate from 0 to 360 degrees in an infinite loop.
The Lost PAC-MAN
20-The lost PAC-MAN - Part 15:01
21-The lost PAC-MAN - Part 24:24

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

CSS - MASTERING ANIMATIONS

What you'll learn

Explore related topics

Course content

About the Instructor1 lecture • 1min

Introduction to CSS animations2 lectures • 4min

Transition Property1 lecture • 3min

Tools You Need To Code + Course Files To Download2 lectures • 4min

Transition Property - Practice7 lectures • 45min

Keyframes & Animation property2 lectures • 9min

Keyframes & Animation property - Practice6 lectures • 27min

Box game6 lectures • 23min

Thank you1 lecture • 1min

Requirements

Description

Who this course is for: