CSS Animations: Create Amazing Effects on Your Website

Alexander Oni, The Web Monkey Academy

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
37 Videos (3h)
    • Welcome

      1:56
    • Tools needed for the job

      1:26
    • What is a Transition?

      3:06
    • Writing your first transition

      7:07
    • Quiz1

      1:24
    • Quiz1 solution

      3:21
    • Working with the Transition Property

      3:08
    • Animatable Properties

      5:16
    • Using the Transition-Delay Function to Control a Transition's Start Time

      6:38
    • Change a Transition's Speed with Timing Functions

      11:35
    • How to transition multiple properties

      5:08
    • The CSS Transition Shorthand

      7:44
    • Transitions Revision

      1:01
    • Rotating Elements with CSS Transforms

      5:26
    • Animating Transformations

      4:57
    • Skewing Content

      5:19
    • Quiz Skew

      1:56
    • Quiz Solution

      6:23
    • How to Scale Elements

      6:49
    • How to Change Transform Position with transform-origin

      8:08
    • Lab 1

      2:39
    • Using the Translate Function to Move Content

      5:08
    • Combining Transformations

      3:23
    • Custom Timing Function with Cubic Bezier

      7:44
    • Transformations revision

      1:10
    • Intro to 3D transforms

      3:31
    • Activating the 3D Space

      7:01
    • 3D Dimensional Rotations

      4:27
    • Lab 2 - Creating a Gallery with Flipping Images

      10:53
    • Changing the perspective origin

      3:27
    • How to create a consistent depth perspective

      2:16
    • Lab 3 - Build a Rotating Cube Gallery

      13:16
    • Working with the Translate 3D Function

      2:25
    • 3D Transformations Revision

      1:48
    • Final Project

      4:56
    • Final Project Solution

      8:03
    • Conclusion - Thank you

      0:58

About This Class

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.

41

Students

--

Projects

Alexander Oni

The Web Monkey Academy

Hi there and welcome to the Web Monkey Academy on Skillshare. I am a professional web developer living in the United States of America.

I have been building websites for the past 7 years now and have been working exclusively with WordPress for almost 4 years.

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

See full profile