CSS Animations Round Two

#css #animation

Hi everyone. Last post I did I started to discuss some easy CSS animations. Well guess what! I'm back with a few more fun ones!

Shall we begin?

Let's start with Fade In

Fade in effects are coded in two steps: 1. you set the initial state and then you set the change.

The next one we'll look at is Change Color

With changing a color with a hover effect, We just need to set the div's class to "color" and specify the color we want.

This will be a fun one. We're going to let it grow!

To accomplish this, you want to use CSS's transform to enlarge it. You'll want to add

-webkit-transform: scale(number);
-ms-transform: scale(number);
transform: scale(number);

The final one I'm going to cover in this is changing the block to another shape...So square to circle!

Really, this one is simpler than you may think. You mainly just want to change the objects border-radius. So in this example we'd use:

.circle:hover
{
   border-radius: 50%; // Or whatever you'd like to change the percentage.
}

That is all for this one. I hope you all enjoyed learning some easy animation effects that you could use on your sites.

DEV Community