Creative CSS Animations, Transitions and Transforms Course [Updated for 2021]

Video description

Create advanced CSS animations using transitions and transforms

About This Video

  • Create exciting 2D and 3D CSS animations
  • Animate HTML elements using CSS clip-path
  • Animate text using CSS animation

In Detail

With an ever-increasing number of commercial companies having a web presence, the importance of user experience has never been more paramount. Knowing and implementing CSS is thus a key tool in any front-end or web developer's toolkit.

Starting from scratch, this course will help you master CSS animations, transitions, and transforms.

The course starts with the CSS transition property, which is key to infusing life into any HTML webpage. The course then progresses to teach you how to implement CSS transforms, which is key to performing tasks such as moving elements around the page, scaling and rotating elements, and so on. The course then teaches you about transform functions that we can use in 2D and 3D environments.

The final section of this course is dedicated to CSS Animation Creative Examples. Here, you will learn and implement various text animation effects such as floating, loading, and animated text. You will also create interesting animations such as driving a car and motorbike. Additionally, by implementing the concepts taught earlier in the course, you will also implement a Newton's Cradle animation.

By the end of this course, you will create over 80 projects of varying complexities and will be equipped with essential CSS tools.

Publisher resources

Download Example Code

Table of contents

  1. Chapter 1 : CSS Transitions Basics
    1. Introduction
    2. What is CSS Transitions?
    3. Transitions Options
    4. Different Ways to Write the Transition Property
    5. What Properties can be Transitioned
  2. Chapter 2 : CSS 2D Transforms
    1. 2D Transforms Basics
    2. Translate Function
    3. Scale Function
    4. Rotate Function
    5. Skew Function
    6. Transform Origin
  3. Chapter 3 : CSS 3D Transforms
    1. Translate in 3D
    2. Rotate in 3D
  4. Chapter 4 : CSS Transforms Creative Examples
    1. Overview
    2. Creative Button Hover Effect 1
    3. Creative Button Hover Effect 2
    4. Creative Button Hover Effect 3
    5. Creative Button Hover Effect 4
    6. Creative Button Hover Effect 5
    7. Creative Button Hover Effect 6
    8. Creative Button Hover Effect 7
    9. Creative Button Hover Effect 8
    10. Creative Button Hover Effect 9
    11. Creative Button Hover Effect 10
    12. Creative Button Hover Effect 11
    13. Creative Button Hover Effect 12
    14. Creative Button Hover Effect 13
    15. Creative Button Hover Effect 14
    16. Creative Button Hover Effect 15
    17. Creative Button Hover Effect 16
    18. Creative Button Hover Effect 17
    19. Creative Button Hover Effect 18
    20. Creative Button Hover Effect 19
    21. Creative Button Hover Effect 20
    22. Image Hover Effect with CSS Transforms 1
    23. Image Hover Effect with CSS Transforms 2
    24. Image Hover Effect with CSS Transforms 3
    25. Image Hover Effect with CSS Transforms 4
    26. Image Hover Effect with CSS Transforms 5
    27. Image Hover Effect with CSS Transforms 6
    28. Creative Menu Hover Effect with CSS Transforms 1
    29. Creative Menu Hover Effect with CSS Transforms 2
    30. Creative Menu Hover Effect with CSS Transforms 3
    31. Creative Menu Hover Effect with CSS Transforms 4
    32. Smoky Text Effect using CSS Transforms
    33. Fill Text Effect on Hover
    34. Social Media Icons Hover Effect with CSS Transforms
  5. Chapter 5 : CSS Animations and Keyframes
    1. Animation Introduction
    2. Create CSS Animations with More Stages
    3. Animation Fill Mode Property
    4. Animation Iteration Count Property
    5. Animation Direction Property
    6. Animation Shorthand Method
  6. Chapter 6 : CSS Animation Creative Examples
    1. Overview
    2. Floating Text using CSS Animation
    3. Loading Effect using CSS Animation
    4. Driving a Car and a Motorbike using CSS Animation
    5. Text Rotator using CSS Animation
    6. Animated Image Pattern using CSS Animation
    7. Button Shaking Hover Effect with CSS Animation
    8. Animated Button with CSS Animation
    9. Lighting Text with CSS Animation
    10. Heartbeat with CSS Animation
    11. Animated Text Background with CSS Animation
    12. Bouncing Balls with CSS Animation
    13. Rain Effect with CSS Animation
    14. Icon Hover Effects with CSS Animation
    15. Loading Text Animation
    16. Awesome Pulse Effect using CSS Animation
    17. Simple Images Slider Show with CSS Animation
    18. Changing Background Color with CSS Animation
    19. Newton's Cradle with CSS Animation
    20. Nice Loading Effect with CSS Animation 1
    21. Nice Loading Effect with CSS Animation 2
    22. Nice Loading Effect with CSS Animation 3
    23. Nice Loading Effect with CSS Animation 4
    24. Nice Loading Effect with CSS Animation 5
    25. Nice Loading Effect with CSS Animation 6
    26. Nice Loading Effect with CSS Animation 7
    27. Nice Loading Effect with CSS Animation 8
    28. Animated Background using CSS Animation
    29. Hexagon Loader Animation

Product information

  • Title: Creative CSS Animations, Transitions and Transforms Course [Updated for 2021]
  • Author(s): Ahmed Sadek
  • Release date: February 2021
  • Publisher(s): Packt Publishing
  • ISBN: 9781801071055