• Search...

categories: Technology & Innovation | Courses in English

Digital
Software
Technology
SDG 8: Decent Work and Economic Growth
SDG 9: Industry, Innovation and Infrastructure

CSS Animations Creativity Course (Part 2)

Duration: 4 h 54 m / 49 lessons

Level: Specialized

Course Language: English

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

Free lessons

1.

Animation Introduction

3 Minutes
2.

Create CSS Animations With More Stages

4 Minutes
3.

Animation Fill Mode Property

6 Minutes
4.

Animation Iteration Count Property

3 Minutes
5.

Animation Direction Property

2 Minutes
1.

Animation Introduction

3 Minutes
2.

Create CSS Animations With More Stages

4 Minutes
3.

Animation Fill Mode Property

6 Minutes
4.

Animation Iteration Count Property

3 Minutes
5.

Animation Direction Property

2 Minutes
6.

Animation Shorthand Method

1 Minutes
1.

CSS animations creative examples

3 Minutes
2.

Floating Text Using CSS Animation

3 Minutes
3.

Rotating Loading Effect Using CSS Animation

4 Minutes
4.

Driving a car and a Motorbike Using CSS Animation

4 Minutes
5.

Text Rotator Using CSS Animation

2 Minutes
6.

Animated Image Pattern Using CSS Animation

3 Minutes
7.

Button Shaking Hover Effect With CSS Animation

3 Minutes
8.

Animated Button With CSS Animation

6 Minutes
9.

Lighting Text With CSS Animations

5 Minutes
10.

Heartbeat Effect With CSS Animations

7 Minutes
11.

Animated Text Background With CSS Animations

2 Minutes
12.

Bouncing Balls With CSS Animations

6 Minutes
13.

Rain Effect With CSS Animations

3 Minutes
14.

Icon Hover Effects With CSS Animations

8 Minutes
15.

Loading Text Animation

6 Minutes
16.

Pulse Effect Using CSS Animations

6 Minutes
17.

Simple Images Slider Show with CSS animations

2 Minutes
18.

Changing Background Color With CSS Animations

4 Minutes
19.

Newton's Cradle Effect With CSS Animations

10 Minutes
20.

Nice Colorful Loading Effect With CSS Animations

9 Minutes
21.

Moving Squares Effect With CSS Animations

5 Minutes
22.

Text Reveal Effect With CSS Animations

4 Minutes
23.

Rotating Ring Loading Using CSS Animations

5 Minutes
24.

Line Loading Effect Using CSS Animations

6 Minutes
25.

Growing Lines loading Using CSS Animations

6 Minutes
26.

Rings Rotation Loading Using CSS Animations

8 Minutes
27.

Fading out Squares using CSS animations

6 Minutes
28.

Growing Lines Loading with CSS Animation

4 Minutes
29.

Background Boxes Moving Using CSS animations

11 Minutes
30.

Hexagon Loader Animation

12 Minutes
31.

Expanding Line Menu Effect Using CSS animations

6 Minutes
32.

Background Boxes Growing Animation Using CSS Animations

8 Minutes
1.

CSS Clip Path Examples

1 Minutes
2.

What Is The CSS Clip Path Property And How We Can Use It To Create Shapes?

7 Minutes
3.

Creative Split Loading Effect Using CSS Clip Path Property

7 Minutes
4.

Creative CSS Wavy Effect Using CSS Clip Path Property

6 Minutes
5.

Creative Image Hover Effect Using CSS Clip Path Property

7 Minutes
6.

Creative CSS Pop Up Effect Using CSS Clip Path Property

4 Minutes
7.

Black to White and White to Black text effect Using CSS Clip Path Property

6 Minutes
8.

Image To Circle Hover Effect Using CSS Clip Path Property

8 Minutes
9.

Creative Image Hover Effect Using CSS Clip Path Property

8 Minutes
10.

Creative Menu Split Effect Using CSS Clip Path Property

10 Minutes
11.

Creative Button Hover Effect Using CSS Clip Path Property

6 Minutes

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

CSS Animations Creativity Course (Part 2)

Duration: 4h 54m / 49 lessons
Level: Specialized
Course Language: English
Looking for help?