Web Design


CSS Animation With Latest Effects - 2020

CSS Animation : Transform , Keyframe , Transition 3d Effects

4.56 (139 reviews)


2.5 hours


Jul 2020

Last Update
Regular Price

Exclusive  Offer
Unlimited access to 30 000 Premium SkillShare courses

What you will learn

Tons of modern CSS techniques to create stunning designs and effects

Advanced CSS animations with @keyframes, animation and transition

Best way to learn CSS with really real world examples

Control and manipulate transformations of elements from 2D to 3D using scale, rotate, and the translate methods

How CSS works behind the scenes: the cascade, specificity, inheritance, etc.


CSS animation is an incredibly useful and powerful tool. It can add interest or creative excitement, direct the user's eye, explain something quickly and succinctly, and improve usability. For that reason, recent years have seen more and more animation on sites and in app.

What is CSS animation?

CSS animation is a method of animating certain HTML elements without having to use processor and memory-hungry JavaScript or Flash. There's no limit to the number or frequency of CSS properties that can be changed. CSS animations are initiated by specifying keyframes for the animation: these keyframes contain the styles that the element will have.

Animated content reveal effects seem to be quite popular right now, and used properly they can capture user focus and engage your audience. You’ve seen this before: a block of  color grows from one side or another horizontally or vertically, and then retreats to the opposing side, this time revealing some text or an image beneath. It’s a concept that might seem tricky but really relies on just a few things.

With CSS3 transitions you have the potential to alter the appearance and behavior of an element whenever a state change occurs, such as when it is hovered over, focused on, active, or targeted.

Animations within CSS3 allow the appearance and behavior of an element to be altered in multiple keyframes. Transitions provide a change from one state to another, while animations can set multiple points of transition upon different keyframes.


As mentioned, for a transition to take place, an element must have a change in state, and different styles must be identified for each state. The easiest way for determining styles for different states is by using the :hover, :focus, :active, and :target pseudo-classes.

Animations Keyframes

A set multiple points at which an element should undergo a transition, use the @keyframes rule. The @keyframes rule includes the animation name, any animation breakpoints, and the properties intended to be animated.


The clip-path property in CSS allows you to specify a specific region of an element to display, rather than showing the complete area

Using clip-path with CSS Shapes

The clip-path property is a great companion to the CSS Shapes properties, particularly the shape-outside property.

Using shape-outside you can change the way content flows around an element because the shape applied using shape-outside changes the geometry of the element’s float area. However, the shape does not change anything else about the element, like backgrounds and borders and such. This means that any borders and background images will not adapt to the shape created on the element. So, even though the element’s float area changes, the content around the element may end up being on top of the element’s background image.

Help and inspiration ?

Not only do you get a load of practical, useful starting projects in this course, you can also head over to CSS Animation.rocks for more, and even sign up to a weekly newsletter packed full of tutorials, inspiration and tips for animating on the web.

There’s no better time to learn Animations : You’ve made a smart choice, because CSS 3 Animations is the most popular language out there. This is no exaggeration. This popularity and growth means more jobs and opportunities than ever before.

Get access to fast support if you get stuck : There’s nothing worse than getting stuck ten hours into a course and not getting the help you need to continue. Getting stuck is part of the learning process. That’s why I’m here to answer every single question that comes my way.

I guarantee that this is the most up-to-date and engaging course available, and it comes with a Udemy 30-day money-back guarantee.

I can’t wait to see you on the inside !

   - B. Praveen Kumar ( PHP Developer & Web Designer - FULL Stack Developer ).


CSS Animation With Latest Effects - 2020
CSS Animation With Latest Effects - 2020
CSS Animation With Latest Effects - 2020
CSS Animation With Latest Effects - 2020


Wave 3d Effect

Wave 3d Effect Intro

Wave HTML Document Creation

Wave CSS File Creation

Download the Source Code For the Wave Effect

Descending Leaves Animation

Descending Leaves Animation INTRO

Descend Leaves HTML Document Creation

Descend Leaves CSS File Creation

Download the Source Code For the Descending Leaves

Product Display on Shopping Websites

Product Display INTRO

Product Display HTML Document Creation

Product Display CSS File Creation

Download the Source Code For the Product Display

Emoji's COVID-19 Animation

Emoji's COVID-19 INTRO

Emoji's COVID-19 HTML Document Creation

Emoji's COVID-19 CSS File Creation

Emoji's COVID-19 JavaScript File Creation

Download the Source Code For the Emoji's COVID-19

Smoke Effects Next Level

Smoke Effect - Next Level INTRO

Smoke HTML Document Creation

Smoke Effect CSS File Creation

Download the Source Code For Smoke Effect


Shreyansh3 June 2021

The instructor is very knowledgeable on this topic and I would of course recommend this for web developers who want to develop amazing webpages with animation.

Mildred28 February 2021

can barely understand him at times, but the course was good. love the projects, hope you can make another course with more projects like these :D

Marco27 December 2020

Es un buen curso, tiene efectos interesantes que puedo aplicar en desarrollos web futuros, lo único que le faltaría es un poco mas de contenido o más efectos.


12/3/2020100% OFFExpired
5/5/2021100% OFFExpired
6/2/2021100% OFFExpired


Udemy ID


Course created date


Course Indexed date
Course Submitted by