By the end of this course, you will be able to
All you need to know about CSS animations, what are the functions and properties of CSS animations and how we use CSS to create various animations that will level up your website.
What are the CSS Keyframes and what are the functions and properties of CSS Keyframes and how they can be used to create a different user experience on your website.
What is the CSS Clip Path property, what are the main functions of it and how we can use it to create different shapes and techniques with CSS Animations.
Course details
- 4 h 54 m/49 lessons
- Last updated: 10/4/2022
- Course completion certificate
Course Content
Animation Introduction
Create CSS Animations With More Stages
Animation Fill Mode Property
Animation Iteration Count Property
Animation Direction Property
Animation Introduction
Create CSS Animations With More Stages
Animation Fill Mode Property
Animation Iteration Count Property
Animation Direction Property
Animation Shorthand Method
CSS animations creative examples
Floating Text Using CSS Animation
Rotating 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 Animations
Heartbeat Effect With CSS Animations
Animated Text Background With CSS Animations
Bouncing Balls With CSS Animations
Rain Effect With CSS Animations
Icon Hover Effects With CSS Animations
Loading Text Animation
Pulse Effect Using CSS Animations
Simple Images Slider Show with CSS animations
Changing Background Color With CSS Animations
Newton's Cradle Effect With CSS Animations
Nice Colorful Loading Effect With CSS Animations
Moving Squares Effect With CSS Animations
Text Reveal Effect With CSS Animations
Rotating Ring Loading Using CSS Animations
Line Loading Effect Using CSS Animations
Growing Lines loading Using CSS Animations
Rings Rotation Loading Using CSS Animations
Fading out Squares using CSS animations
Growing Lines Loading with CSS Animation
Background Boxes Moving Using CSS animations
Hexagon Loader Animation
Expanding Line Menu Effect Using CSS animations
Background Boxes Growing Animation Using CSS Animations
CSS Clip Path Examples
What Is The CSS Clip Path Property And How We Can Use It To Create Shapes?
Creative Split Loading Effect Using CSS Clip Path Property
Creative CSS Wavy Effect Using CSS Clip Path Property
Creative Image Hover Effect Using CSS Clip Path Property
Creative CSS Pop Up Effect Using CSS Clip Path Property
Black to White and White to Black text effect Using CSS Clip Path Property
Image To Circle Hover Effect Using CSS Clip Path Property
Creative Image Hover Effect Using CSS Clip Path Property
Creative Menu Split Effect Using CSS Clip Path Property
Creative Button Hover Effect Using CSS Clip Path Property
About this course
Animations can direct your website visitors to an important element on the page, considered to be powerful tools for engaging and providing an exceptional experience for visitors on your website. They can even make the loading experience more entertaining for your audience. Using CSS language for animations has made it easy for developers to animate any element on the web page in various creative ways. This course will be your starting point to learn everything about CSS Animations and keyframes.
Course requirements and prerequisites
This training course requires prior knowledge of CSS and HTML.
Mentor
Ahmed Sadek
Senior Web Developer
951 Learners
5 Courses