5.1 Changing Color
CSS transitions let you animate changes to an element's properties, creating smooth visual effects. We're gonna check out how to use transitions to change color, size, and position of elements, along with showing practical examples.
Changing an element's color with CSS transitions is one of the most common uses. It can involve changing the color of text, background, or borders of an element.
Example 1: Changing Background Color
This example shows changing the background color of an element when you hover over it:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Changing Background Color</title>
<style>
.box {
width: 100px;
height: 100px;
background-color: #3498db;
transition: background-color 1s ease;
}
.box:hover {
background-color: #2ecc71;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
Code Explanation:
.box: an element with fixed size and background color.box:hover: when you hover over the element, the background color smoothly changes from blue to green over 1 second with an ease timing function
Example 2: Changing Text Color
This example shows changing the text color of an element on hover:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Changing Text Color</title>
<style>
.text {
font-size: 24px;
color: #e74c3c;
transition: color 0.5s linear;
}
.text:hover {
color: #8e44ad;
}
</style>
</head>
<body>
<div class="text">Hover over me!</div>
</body>
</html>
Code Explanation:
.text: an element with initial text color.text:hover: on hover, the text color smoothly transitions from red to purple over 0.5 seconds using a linear timing function
5.2 Changing Size
Changing the size of elements using CSS transitions can include changing the width, height, or both dimensions simultaneously.
Example 1: Changing Width
This example shows changing the width of an element on hover:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Changing Width</title>
<style>
.box {
width: 100px;
height: 100px;
background-color: #f39c12;
transition: width 2s ease-in-out;
}
.box:hover {
width: 200px;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
Code Explanation:
.box: an element with an initial width of 100 pixels-
.box:hover: on hover, the width of the element smoothly increases to 200 pixels over 2 seconds with anease-in-outtiming function
Example 2: Changing Height
This example shows changing the height of an element on hover:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Changing Height</title>
<style>
.container {
height: 200px;
}
.box {
width: 100px;
height: 100px;
background-color: #1abc9c;
transition: height 1.5s ease;
}
.box:hover {
height: 200px;
}
</style>
</head>
<body>
<div class="container">
<div class="box"></div>
</div>
</body>
</html>
Code Explanation:
.box: an element with initial height of 100 pixels.box:hover: on hover, the height of the element smoothly increases to 200 pixels over 1.5 seconds with aneasetiming function
5.3 Changing Position
Changing the position of elements using CSS transitions can include moving an element with properties
top, right, bottom, left or with transformations like translate.
Example 1: Moving with left
This example shows moving an element to the right on hover using the left property:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Moving Element</title>
<style>
.box {
position: relative;
width: 100px;
height: 100px;
background-color: #e74c3c;
transition: left 2s;
left: 0;
}
.box:hover {
left: 100px;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
Code Explanation:
.box: an element with an initial left position of0.box:hover: on hover, the element smoothly moves 100 pixels to the right over 2 seconds
Example 2: Moving with transform: translate
This example shows moving an element to the right and down on hover using translate transform:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Moving with transform: translate</title>
<style>
.container {
height: 150px;
}
.box {
width: 100px;
height: 100px;
background-color: #3498db;
transition: transform 1s;
transform: translate(0, 0);
}
.box:hover {
transform: translate(100px, 50px);
}
</style>
</head>
<body>
<div class="container">
<div class="box"></div>
</div>
</body>
</html>
Code Explanation:
.box: an element with an initial transformation oftranslate(0, 0).box:hover: on hover, the element smoothly moves 100 pixels to the right and 50 pixels down over 1 second
GO TO FULL VERSION