Web Animation With CSS -Transition-

Web animation was and still one of the hottest topics when it comes to the world of the internet from the late nineties where almost every single web page was submerged with blinking gifs, through mid 2000’s where flash reigned over the web with funny and interactive applications, until Steve Jobs declaration in 2010 which was literally the death sentence to flash and the beginning of the era of CSS3.

Flash was created during the PC era — for PCs and mice. Flash is a successful business for Adobe, and we can understand why they want to push it beyond PCs. But the mobile era is about low power devices, touch interfaces and open web standards — all areas where Flash falls short. Steve Jobs — 2010

Through 3 decades, websites got better and better and most importantly individuals and companies gained more interest in them. People started to look at websites in a more serious way and have seen big opportunities on them to make them a real source of income (business) rather than only simple virtual pages to read or surf on.

So that being said animation on websites floated to the surface as one of the most important key factors for a better design and especially a better user experience which leads to more traffic and more traction, resulting finally to more conversion and sales.

In this article I’m going to talk about the basics of one of different techniques used to animate web pages’ components (html elements) which is the CSS transition.

Basic example of what can be done with transition

CSS Transition

Usually when you want a state of an html element to be changed after a certain event, let’s say hovering on a div, the state of that element gets changed instantly which happens to not be an interesting effect to say the least.

Changing the scale of a div when it gets hovered without transition

However with transition, you can set a duration for that change of state, and then see the progression of that change during that period of time, which leaves a smooth and pleasing experience for the eyes of the user.

Changing the scale of a div when it gets hovered with transition

transition-duration

As mentioned before we need to set a duration for the transition from the state 1 to state 2 and this is when this property comes in handy. I used a duration of 0.5 seconds for the animation of the square: transition-duration: 0.5s

transition-delay

This property delays the animation of the element for a given period of time. In the below example I delayed the animation of the square scaling for 0.5 seconds like so: transition-delay: 0.5s

transition-property

You can specify the exact property you want to see the transition on if you apply more than one change on the element. Let’s say I want to change the scale and the opacity of the square but I only want to see the transition effect of the scale but I want the opacity to be changed instantly, in this case I can do that by typing the following line: transition-property: transform

Transition applied only on the scaling effect

If I want the transition to hit both of the scaling and the opacity effects, I can type this: transition-property: transform opacity

Transition applied on both of the scaling effect and opacity

You can add the transition effect by giving the “all” value to this property: transition-property: all or you can just simply not use at all and by default the transition will effect every property of the element.

transition-timing-function

My favorite part of transition, this adds much of impact on the animation, it adds more realistic look to how the element is animated, like adding an elastic feel to how the square gets bigger or a bouncing effect. Let’s add the elastic effect to the square motion by adding this: transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55)

There’s some websites that you can get values or create custom ones before adding them to your code and here’s 2 of them:

Easing Functions Cheat Sheet

https://cubic-bezier.com/

Shorthand Syntax

Finally you can use all of the above properties in just one single line, and here’s a variety of how you can use the shorthand syntax:

• transtion: 0.5s 0.5s all : duration delay property
• transtion: 0.5s 0.5s ease-in : duration delay timing-function
• transtion: 0.5s ease-out : duration timing-function

I hope this helped especially if you’re a beginner, and I’m probably going to post more articles about other different techniques of animation so I hope to see you in the next post, have a nice day !