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.
Table of contents
- Chapter 1 : CSS Transitions Basics
- Chapter 2 : CSS 2D Transforms
- Chapter 3 : CSS 3D Transforms
-
Chapter 4 : CSS Transforms Creative Examples
- Overview
- Creative Button Hover Effect 1
- Creative Button Hover Effect 2
- Creative Button Hover Effect 3
- Creative Button Hover Effect 4
- Creative Button Hover Effect 5
- Creative Button Hover Effect 6
- Creative Button Hover Effect 7
- Creative Button Hover Effect 8
- Creative Button Hover Effect 9
- Creative Button Hover Effect 10
- Creative Button Hover Effect 11
- Creative Button Hover Effect 12
- Creative Button Hover Effect 13
- Creative Button Hover Effect 14
- Creative Button Hover Effect 15
- Creative Button Hover Effect 16
- Creative Button Hover Effect 17
- Creative Button Hover Effect 18
- Creative Button Hover Effect 19
- Creative Button Hover Effect 20
- Image Hover Effect with CSS Transforms 1
- Image Hover Effect with CSS Transforms 2
- Image Hover Effect with CSS Transforms 3
- Image Hover Effect with CSS Transforms 4
- Image Hover Effect with CSS Transforms 5
- Image Hover Effect with CSS Transforms 6
- Creative Menu Hover Effect with CSS Transforms 1
- Creative Menu Hover Effect with CSS Transforms 2
- Creative Menu Hover Effect with CSS Transforms 3
- Creative Menu Hover Effect with CSS Transforms 4
- Smoky Text Effect using CSS Transforms
- Fill Text Effect on Hover
- Social Media Icons Hover Effect with CSS Transforms
- Chapter 5 : CSS Animations and Keyframes
-
Chapter 6 : CSS Animation Creative Examples
- Overview
- Floating Text using CSS Animation
- Loading Effect using CSS Animation
- Driving a Car and a Motorbike using CSS Animation
- Text Rotator using CSS Animation
- Animated Image Pattern using CSS Animation
- Button Shaking Hover Effect with CSS Animation
- Animated Button with CSS Animation
- Lighting Text with CSS Animation
- Heartbeat with CSS Animation
- Animated Text Background with CSS Animation
- Bouncing Balls with CSS Animation
- Rain Effect with CSS Animation
- Icon Hover Effects with CSS Animation
- Loading Text Animation
- Awesome Pulse Effect using CSS Animation
- Simple Images Slider Show with CSS Animation
- Changing Background Color with CSS Animation
- Newton's Cradle with CSS Animation
- Nice Loading Effect with CSS Animation 1
- Nice Loading Effect with CSS Animation 2
- Nice Loading Effect with CSS Animation 3
- Nice Loading Effect with CSS Animation 4
- Nice Loading Effect with CSS Animation 5
- Nice Loading Effect with CSS Animation 6
- Nice Loading Effect with CSS Animation 7
- Nice Loading Effect with CSS Animation 8
- Animated Background using CSS Animation
- Hexagon Loader Animation
Product information
- Title: Creative CSS Animations, Transitions and Transforms Course [Updated for 2021]
- Author(s):
- Release date: February 2021
- Publisher(s): Packt Publishing
- ISBN: 9781801071055
You might also like
video
Modern Web Design with HTML5, CSS3, and JavaScript
Responsive websites are the future. They allow your site to adapt to different screen sizes, which …
video
HTML5 Canvas - Create 5 Games, 5 Projects, and Learn JavaScript
This course goes over the features of HTML5 in a way that will help you quickly …
video
CSS in Depth in Motion
By mastering CSS, you can make your pages more attractive, your code more readable, and your …
video
Build Responsive Websites with HTML5, CSS3, Bootstrap, and SASS
Responsive web design is about creating web pages that look good on all devices. A responsive …