CSS - MASTERING ANIMATIONS

Driss Boumlik, Web/.Net developer

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
21 Videos (1h 33m)
    • About the Instructor

      0:35
    • What will you learn ? - Preview

      0:35
    • What's css animations

      3:34
    • Transition Property explained

      3:10
    • Tools you need to code

      3:27
    • CSS Transition - Let' practice

      6:28
    • Enough with those ugly checkbox - Part 1

      5:24
    • Enough with those ugly checkbox - Part 2

      7:47
    • Enough with those ugly checkbox - Part 3

      5:13
    • Making an animated progress bar

      2:58
    • Let's move that wheel

      7:22
    • Step by step form

      9:22
    • Keyframes explained

      6:47
    • Animation property explained

      2:17
    • Let' create some fancy drop down menu - Part 1

      7:37
    • Let' create some fancy drop down menu - Part 2

      2:54
    • Let' create some fancy drop down menu - Part 3

      2:42
    • That moon isn't spinning

      4:31
    • The lost PAC-MAN - Part 1

      5:01
    • The lost PAC-MAN - Part 2

      4:24
    • Last words

      0:35

About This Class

About this class ?

The class 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.

The course also includes also a project to apply what you have learned.

----------------------------------------

 

What should I know before ?

A basic knowledge of HTML( tags, html structure, referencing styles )  & CSS (styling elements, properties, classes) is required.

----------------------------------------

What's in there : 

  • CSS animation concept
  • what's good to animate
  • when it's good to animate
  • Transition properties
  • Animation property + keyframes
  • How keyframes and animation property are related
  • Project : Create a Pac-Man

----------------------------------------

What you will learn ?

  • Css properties syntax
  • how to use shorthand properties
  • animating colors, shadows.. moving things around & rotating them ...etc
  • controlling 100% your animation and even before and after the animation execution.
  • how to create awesome Menus, checkboxs, Spinners, step by step forms ….

----------------------------------------

Tools you will need: Code editor, Browser 

Code Editors :

Visual studio code (All Platforms) - download

Atom (All Platforms) - download

Notepad++ (Windows) - download

Browser :

Chrome - download

Firefox Developer Edition - download

Opera - download

 

Course Files : download

Here is how to download :

2d6f671d

----------------------------------------

Last but not least :

  1. Don't hesitate if you have any question to ask.
  2. Please provide your feedback.

Go ahead and take your web design skills to a whole new level with animations.

Here is my intro video :

https://www.youtube.com/watch?v=xGiNBS-E62g

for more details check out my outline : 

https://docs.google.com/document/d/171KpgsNn4zI-ikF6KXAS9oJoIOL6mX1fH7O-hek7skg/edit?usp=sharing

3 of 3 students recommendSee All

Great course, I loved it, Keep up the good work

14

Students

1

Project

Driss Boumlik

Web/.Net developer

I’m Driss! I’m a 28 years old from Morocco. I work as a freelance web developer, Do lot of talks in my old school, Teach & Help people in programming including kids which is AMAZING, and enjoy Mondays because I love what I do.

I code, blog, speak, write, teach ... and other stuff usually not in the same order.

See full profile