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

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

by Ahmed Sadek
Released February 2021
Publisher(s): Packt Publishing
ISBN: 9781801071055

Read it now on the O’Reilly learning platform with a 10-day free trial.

O’Reilly members get unlimited access to books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.

Start your free trial

Video description

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.

What You Will Learn

  • Master CSS animations, transitions, and transforms
  • Use the CSS clip-path property to animate HTML elements
  • Implement CSS 2D and 3D animations
  • Create animations with buttons and menus
  • Create animations with webpage text
  • Create over 80 animations and master the art of animating webpages

Audience

Whether you are a beginner or an experienced web developer, you can use this course to improve and/or learn CSS animations. This course is intended for anyone who wants to create webpage animations.

About The Author

Ahmed Sadek: Ahmed Sadek is a senior web developer working as a freelancer for the last 7 years. He has developed hundreds of web projects and helped companies of all sizes in improving their business.

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