CSS Animation Tutorial — 4

Welcome to part 4 of the series. You can find part 3 here.

This series is inspired by this awesome YouTube series by The Net Ninja.

Create a new folder web and two files pop-up.html and style.css inside it. Also, a folder img inside it. You can get the images from my github link.

The content of pop-up.htmlare below.

Image for post
Image for post
Basic Html

The content to show a styled pop-up are below in style.css

This will show the basic styled pop-up in web-browser.

Image for post
Image for post
The pop-up

Now, we will animate our pop-up. Here we are first hiding the pop-up and then running the animation drop.

Image for post
Image for post
Animating

In the drop animation, we have 3 states. At 70% we are bringing it to 700px — 400px = 300px and at 100% we are bringing it up by 50px, so creating a bounce effect. Also, changing it’s opacity for a smooth transition.

Image for post
Image for post
The dropping pop-up

Next, we will do a eCommerce shopping cart animation. Here, if we click on any it to Add to Basket, it will animate before moving to basket.

In the same web folder create a basket.html and put the basic content in it.

Now, also put the basic style in style.css to show the layout.

It will show this awesome layout.

Image for post
Image for post
t-shirt store

You might have also noticed that we are using the below jquery in our page. It is used to create a class zoom, when the user click on any item and also remove it after 1000 ms.

Image for post
Image for post
jquey

Next, we will add animation in our css and will target the zoom class.

Image for post
Image for post
zoom

Now, when we click any Add to Basket button a small t-shirt is shown for 1000ms at the top.

Image for post
Image for post
Small image

Now, we will complete our animation to slowly fade and also move towards the cart.

Image for post
Image for post
Our animation

This will show this awesome animation, every-time we click on any Add to Basket button.

Image for post
Image for post
Awesome animation

Next, we will do a nice flip card rotate animation.

Create a new rotate folder and create a panels.html and put the basic content in it.

Also, create a style.css and put basic styles in it.

We will get this nice looking, pick a card in the browser.

Image for post
Image for post
Pick a Card

Now, every li back a front and back div. We want to hide them at the start.

Image for post
Image for post
Hiding

We are making them to rotate on y-axis by 90 degrees and as we know, it will make the 2D item hide.

Image for post
Image for post
Hiding back element

Now, we will also have the front div have a position of absolute, to get rid of the empty spaces.

Image for post
Image for post
absolute

Now, the back div are sort of hidden behind the front div.

Image for post
Image for post
All hidden

Now, we will add the animation in our front div, to rotate to 90 deg on y-axis on hovering.

Also, we are doing the opposite in our back div with an added delay.

Image for post
Image for post
Animation complete

Now, this completes our nice flip animation.

Image for post
Image for post
Nice one

This completes our CSS Animation Series. You can find the code for the same here.

Hope you liked it.

Written by

UI Lead- ReactJS, JavaScript and everything in-between.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store