Pure CSS Transitions: A Quick Introductory Guide
By Elisa Martín & Emma Martín
Transitions are the basis of CSS animations. They allow us to be behind the wheel when we want to navigate between two states of an element. We can decide not only how and which properties will change, but also about when and for how long.
For instance, let’s imagine we have an element we want the user to interact with (such as an article from our blog, an item to purchase, a gallery’s image, etc.).
When we hover over the link, we want a simple modification of the element’s size and opacity:
And we are going to get this:
Did you notice that the transition from one state to another feels… weird? We want to modify its opacity from 1 to 0.5, and to make it a little bit bigger as well. But we need a workaround for the abrupt transition from one state to another.
Here is where transitions come in handy. By stating the element’s properties, together with their duration, velocity and time delay, we generate a transitional effect.
So let’s start with a quick overview of these properties that will provide a much smoother hover experience for our example.
🎯Transition-property
First, we’ll decide which property we want to change. So let’s dive in by setting the transition-property, followed by the properties over which we want to apply the transitional effects:
Now let’s see how we can manage the time it takes for our image to go from one state to the other one.
⏳Transition-duration
We continue by setting up how long the effect will take place. We establish a transition duration of 0.8 seconds by this:
🚴🏽Transition-timing-function
Here is when we can even manipulate the pace of our transition from an element’s starting state until its end. This property is the transition-timing-function. We adjust its transition rate, modulating its speed variation over the time the whole transition takes place (we set this one earlier with the transition-duration property).
There are predefined values for this function (check the MND entry here for more detailed info). Let’s go for an ease-in-out value:
This value (ease-in-out) defines an equal speed at the start and at the ending of the transition. However, it’s possible to customize the speed rate with a cubic-bezier function.
🐌Transition-delay
The last property is the delay we want to set as the hold up time before triggering our transition. How long do we want to wait until our transition is set to motion?
Well, in our exercise, this property is not really necessary, since its default value is 0 and we want the transitional effect to take place as soon as the user hovers over our image. However, just for illustrative purposes, we are going to add it with a minimum time delay of 0.1 seconds:
All properties in a single line
And that’s it! Our first transition has been set. Check the final effect:
We can wrap up all the values above in one single line, declaring the transition property as such:
🔥BONUS LET’S PUT IT INTO PRACTICE The hidden HTML :: pseudo-elements
Pseudo-elements are like getting extra DOM (Document Object Model) elements for free. They allow us to add extra content, decoration and more to our pages without adding extra HTML. In the example below we’ll use a pseudo-element to add a hover transition.
When adding pseudo-elements, the first thing to keep in mind is the need to specify the ✨content✨ property and just like a wizard’s wand, it will made it visible on the page!!
👉🏼 Example:
For this example we’ll use a before pseudo-element to create and effect when hovering over a button.
Remember that the pseudo-element will be visible only when hovering on the buttons so we’ll set a 0 width or 0 height depending on the hover effect.
The position property specifies the type of positioning method used for an element. Elements are then positioned using the top, bottom, left, and right properties. However, these properties will not work unless the position property is set first. They also work differently depending on the position value:
-An element with position: relative (button); is positioned relative to its normal position.
-An element with position: absolute (.fill-left:before); is positioned relative to the nearest positioned ancestor (button).
Once we have our pseudo-element visible on the page, we’ll need to position it in a place we know since it will be an empty element at first.
now…Let’s 😲 WOW 😲 our users
Using All properties in a single line we can declare the transitions in each of our pseudo-elements in one single line! The properties to transition (in our case all of them) the speed of the transition (in our case 1 second) and a third value which lets you change how the acceleration and deceleration is calculated, but we’ll stick with the default by leaving this blank.
Now, we just set the properties that will change when hovering from “width : 0px” to width:100% (or the height property depending on our hover effect) and specify the opacity we want in our effect.
🤔In case you are wondering… YES! We could have used an :after pseudo-element and place it just like :before since they are absolute from the button in this case.
Conclusion
The human brain is hardwired to pay attention to moving objects. Our bias towards motion can be used in a powerful way in our websites or apps as an easy way to draw users’ attention to important areas of your product. Try out these new techniques when incorporating movement into your next website!!
“Emotional design’s primary goal is to facilitate human-to-human communication. If we’re doing our job well, the computer recedes into the background, and personalities rise to the surface”.
Aarron Walter, Designing For Emotion
