CSS Animations

Photo by Pankaj Patel on Unsplash

In this post I want to go over css animation a little. I will assume you have experience in HTML and CSS for this post.

So first off lets writer a little HTML so we have something in the browser.

Here we have just a parent and then a child. With a little styling we have two boxes on the screen, one inside the other and when you hover on the box it has a movement that happens.

Right now it just jumps from side to side but we can use Css to animate it more and make it a smooth transition.

If we go back into our .child div and add transition: transform 1s; now we will have a smooth transition from left to right.

here we could also add new properties to our :hover like changing the background color etc.

We can add to our transition too by specifying how we want the transition to occur for example we can add ease-in-out to make the animation start and end slow but speed up in the middle.

That's about all you can do with transition so to have a more complex animation we will have to use keyframes.

So in our .parent:hover .child we will add the word animation: then we can name it whatever we want.

.parent:hover .child {
   transform: translateX(100%);
   animation: left-to-right 1s ease-in;
}

so now we named our animation gave it a time and transition property and below our last css selector we will add keyframes

@keyframes left-to-right {
      
    }

now we have control over all our values from 0% to 100%

since this only has a value for 100% you will see that the box jumps back to its original position.

so let’s fix that…

we can add forwards to our hover selector animation

this will allow the box to stay while hovering.

Alright now let’s make our inner box move around in a circle.

there are some more properties we can add to our animation like

.parent:hover .child {
      animation: left-to-right 1s ease-in forwards
    }

we can add 3 after forwards and the animation will run 3 times before stopping or infinite for it to always be running so long as we hover then alternate so it goes back and forth.

there is a lot we can do with keyframes and it’s been a lot of fun learning.

Again, thanks for reading!