What are CSS Transitions and How to Use Them
In a previous article, you learned the basic concepts of CSS animations and how to use them. We could say that transitions are a simplified form of animation with some differences between them, the form of triggering the animation being the most relevant one.
Another difference is that transitions have only two states (initial and final state), whereas you can define multiple states for an animated element with the @keyframes rule. Transitions are triggered on an action, for example when hovering over an element, but animations can occur without a specific action, for example with an animation-delay after page load.
In this tutorial, we are going to learn the basic concepts of CSS Transitions with a practical example. Additionally, you will also learn how to use an image sprite with CSS.
Let’s start!
Step #1. – The Proposed Layout
We have 4 cards promoting the regular services of a web agency. When hovering over them, each one of the elements inside the card will have a different transition to achieve the desired effect.
Step # 2. – The HTML
- Open your preferred code editor
- Create an HTML file called index.html
- Copy and paste this code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>CSS Transitions</title>
<link href="https://fonts.googleapis.com/css?family=Oswald|Quattrocento&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="experts">
<h2>What We Do</h2>
<div class="service-card-container">
<div class="service-card">
<div class="front">
<span class="icon-strategy"></span>
<h3>Strategy</h3>
</div>
<div class="hidden">
<p>The main strategy of a web site is to make visitors convert.</p>
<a href="#">Read more</a>
</div>
</div>
<div class="service-card">
<div class="front">
<span class="icon-ui-ux-design"></span>
<h3>UI / UX Design</h3>
</div>
<div class="hidden">
<p>The design of your site Lorem ipsum dolor sit amet consectetur, adipisicing elit. Voluptate, error.</p>
<a href="#">Read more</a>
</div>
</div>
<div class="service-card">
<div class="front">
<span class="icon-development"></span>
<h3>Development</h3>
</div>
<div class="hidden">
<p>Our team of developers Lorem ipsum dolor sit amet, consectetur adipisicing.</p>
<a href="#">Read more</a>
</div>
</div>
<div class="service-card">
<div class="front">
<span class="icon-digital-marketing"></span>
<h3>Digital Marketing</h3>
</div>
<div class="hidden">
<p>Marketing experts Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
<a href="#">Read more</a>
</div>
</div>
</div>
</div>
</body>
</html>
The service-card-container has 4 different cards. Each card is composed of an icon, a title, some text, and a link to the corresponding information on the site. The text and link will be shown when hovering over the card, otherwise, they will be hidden.
Step #3. – The Basic CSS Styles
- Create a CSS file and call it style.css — in the HTML code is already a link to this file and to Google Fonts
- Copy and paste these styles to change the typography styles and the background color of the cards:
/* BASIC RESET */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
list-style: none;
text-decoration: none;
}
/* TYPOGRAPHY */
body {
font-family: 'Quattrocento', serif;
}
h1,
h2,
h3,
h4,
h5,
h6,
a {
font-family: 'Oswald', sans-serif;
}
/* BACKGROUND */
.service-card {
background-color: #0a1128;
color: white;
}
.service-card a {
color: white;
}
Step #4. – The Layout Styles
Let’s use CSS Grid to create the cards and arrange them horizontally.
- Edit the CSS code:
/* LAYOUT */
.experts {
margin-top: 36px;
}
.experts h2 {
text-align: center;
}
.service-card-container {
display: grid;
grid-template-columns: repeat(4, 1fr);
}
.service-card {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: auto auto;
grid-row-gap: 18px;
justify-items: center;
align-content: center;
height: 320px;
}The service card container is a horizontal grid with 4 columns. Each card has been declared also as a grid container with 2 rows. Notice, that we have declared a fixed height for each card.
Step #5. – The Image Sprite
According to W3Schools, an image sprite is a collection of images put into a single image. You save bandwidth since the page will not need to make a server request for each image it has to load. It will request the image once, and then you map the required part of the image within the CSS code.
The image is 240px wide and 480px tall. Each one of the icons covers an area of 120x120px. To map each one of the images, we start at the top left corner of the image with the coordinates (0px 0px) — following the order ‘left – top’.
That way, the images on the left column of the sprite are located at:
- 0px 0px
- 0px -120px
- 0px -240px
- 0px -360px
These are the images to be used before hovering.
The images on the right column of the sprite are located at:
- 120px 0px
- 120px -120px
- 120px -240px
- 120px -360px
- Edit the CSS code:
.service-card span {
display: inline-block; /* to be able to apply width and height to the element */
}
.icon-strategy {
background: url(./sprite.png) 0px 0;
width: 120px;
height: 120px;
}
.icon-ui-ux-design {
background: url(./sprite.png) 0px -120px;
width: 120px;
height: 120px;
}
.icon-development {
background: url(./sprite.png) 0px -240px;
width: 120px;
height: 120px;
}
.icon-digital-marketing {
background: url(./sprite.png) 0px -360px;
width: 120px;
height: 120px;
}
Not bad, right? Let’s add some cosmetic touch to finish this part with some padding.
- Edit the CSS code:
.service-card-container {
display: grid;
grid-template-columns: repeat(4, 1fr);
padding: 0.9em 0 1.8em 0;
}
.service-card {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: auto auto;
grid-row-gap: 18px;
justify-items: center;
align-content: center;
height: 320px;
padding: 0 2.75em;
}
Step #6. – The CSS Transitions
The CSS transition property has 4 different child properties:
- transition-property (the property of the element, to which the transition will be applied)
- transition-duration
- transition-timing-function
- transition-delay
The shorthand is:
transition: [transition-property] [transition-duration] [transition-timing-function] [transition-delay]
- Edit the CSS code:
/* TRANSITIONS */
.service-card {
transition: margin-top 0.2s ease-out, height 0.2s ease-out, background 0.2s ease-out;
}
.service-card:hover {
margin-top: -5em;
height: 25em;
background: #006e9c;
}As you can notice, it is possible to apply multiple transitions to different element properties, by separating them with a comma. None of these transitions has a delay.
To make the card roll upwards, you set a negative margin on the top and add the absolute value of this margin to the height of the element (320px == 20em).
It is time now to target the images and make them change with a transition.
- Edit the CSS code:
.icon-strategy,
.icon-ui-ux-design,
.icon-development,
.icon-digital-marketing {
transition: background 0.4s step-end;
}
.service-card:hover .icon-strategy {
background: url(./sprite.png) 120px 0;
width: 120px;
height: 120px;
}
.service-card:hover .icon-ui-ux-design {
background: url(./sprite.png) 120px -120px;
width: 120px;
height: 120px;
}
.service-card:hover .icon-development {
background: url(./sprite.png) 120px -240px;
width: 120px;
height: 120px;
}
.service-card:hover .icon-digital-marketing {
background: url(./sprite.png) 120px -360px;
width: 120px;
height: 120px;
}Once again:
- transition-property: background
- transition-duration: 0.4s
- transition-timing-function: step-end
The rest is just mapping to the exact coordinate (detailed above) on the image sprite.
Finally, let’s target the .hidden container.
- Edit the CSS code:
.hidden,
.hidden a {
transition: color 0.4s ease-out 0.2s;
}
.service-card:hover .hidden {
height: auto;
}
.service-card:hover .hidden,
.service-card:hover .hidden a {
color: white;
}There are two details here to take notice of:
- The transition on the color of the text has a transition-delay of 0.2s
- The height property of the element changes on hover without a transition
Transitions are supported by all major browsers.
I hope you liked this exercise. Thanks for reading!
The code can be found here.