CSS Styling

There is a lot to learn in the world of CSS. Some of it is fun and some of it is not so much. One of the fun properties of CSS in my mind is animations! This is how we make our pages interact and come to life for the user. There are a lot of different things you can do, but for today I wanted to start off with some very simple animations to get your mind thinking!

Now to get started I have just some really basic HTML and CSS.

I have a parent and a child div, and as you can see the parent is outside the child so the child is inside the div. As seen below, the parent is the larger black square, and the child is the cream square inside of it.

Now to start, whenever you hover over the parent all I’m doing is transforming the child. Essentially I’m moving it all the way to the right side of the parent and back again depending on if it’s hovered or not ( which is outlined with this code specifically, with the outcome below).

Now as you can see above we are getting the transition, or animation that we want, however, right now this doesn’t look the best. The motion isn’t smooth and it simply looks like it’s jumping around. To fix this we need to use animation.

In CSS there are two different ways to animate. The first one is you can use the transition property which is simple

and works great for doing simple animations. Then there’s the full animation property which is a bit more complex but is great for making more complex multi-step animations. In this case, we’re going to get started with the simple transition property and then move on to the animation property. How do you go about writing a transition? Great question! All you need to use is the transition property in CSS. Now, remember, do not put the transition property on the hover (that is a common mistake, as shown above). Where you need to put it is on the child itself. To write a transition you define it in CSS with, you guessed it, transition!

As you can see there are multiple transition properties.

By default, the transition property is going to transition all of the properties on your element. For this example, we want to transform or transition our transform here so we’re going to write transform. What this does is tells our CSS we’re only wanting to animate this one single property and nothing else. Then what we need to do is specify

how long this animation will take, which we have specified as 1 second here.

Once completed this is our final result.

Looking much better already! Now the last two things that we can do with this transition property specify a delay as well as a timing function. The timing function is going to determine how your animation is going to play out. For example, one thing we can use is, ease-in-out. What this is going to do is start your animation out slow and also end slow, with the middle being slightly faster. The end result will be something like this below (difficult to see the change because it’s subtle).

Awesome! So now we’ve played around with the transition and timing a bit. The last thing we can do is add a delay, which we can do by simply adding the time of that delay to the end of the written property after ease-in-out. For this example let’s delay it 3 seconds.

Notice the delay below as it transitions forward and transitions back.

Great work! Now, like I said just the very basics of the transition function, but hopefully, you can already see its full potential! Now, if we wanted to do more complex things, such as, taking the cube (child div),

and move around in a circle, I couldn’t do that with the transition. In order to do that I would need to use the more complex animation property.

To make this current transition and turn it into an animation all we need to do is write out the word animation! Again, so easy right!? Now with animations, you write it in the place where you want it to happen, which in our case is on the hover. We are going to first write animation as our property and then the first thing an animation will need

is a name. This can be anything since we will define it later. For this example, we are going to use the name circle since we are trying to get the child box to move all the way in a circle.

Next, we are going to use a little thing called keyframes. Per, MDN Web Docs:

The @keyframes CSS at-rule controls the intermediate steps in a CSS animation sequence by defining styles for keyframes (or waypoints) along the animation sequence. This gives more control over the intermediate steps of the animation sequence than transitions.

Now to use them we simply define them below in our CSS. There will be 4 positions of our child as it moves around, so we need to define all 4 of them. We do that by using the point in the transition by percentage, and the action we would like it to take. In this instance we have the 0% position which is the start, 33% which should be the next position which will move the square down. To do that we write transform: translateY(100%). This will transform the div and flip the Y position to the bottom. Next, we have the 66% position and we need that to keep the square on the bottom and move it over, so we write the same for the Y which is translate&(100%), and add the X to move it over with translateX(100%). Finally, we want our final position at 100% to simply translate(100%), which will return the square to its correct position on top but move it to the right. When this is all done your code should look like this and your animation should flow around in a circle as shown below.

If you were able to follow along and get the same result, Well done! Now as I’ve said a few times already, this is just a simple example of Transition and Animation in CSS, but hopefully, it opened up your eyes to everything else that could be done. Thanks again for reading and Happy Coding Everyone!