CSS Transition
All About EffectsIn this lesson, we will learn about the CSS transition properties and how to apply it on HTML elements.
What are CSS Transitions?
CSS transitions allow you to smoothly change CSS property values from one value to another over a specified duration. This creates visually pleasing animations and effects on web pages, making them more interactive and engaging for users. CSS transitions are commonly used for hover effects, button animations, and other dynamic visual changes on websites.
The CSS transition consist of five properties and they are:
- transition-property
- transition-duration
- transition-timing-function
- transition-delay
- transition
transition-property
This is where you specify the CSS property that you want to transition. You can also transition multiple properties by separating them with commas.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS transition Example</title>
<!-- Internal CSS -->
<style>
.element {
width: 100px;
height: 50px;
background-color: #60CA00;
transition-property: background-color, width;
}
.element:hover {
background-color: #16BBB9;
width: 300px;
}
</style>
</head>
<body>
<div class="element">Hover on me</div>
</body>
</html>In the example above, when you change the background color and width of the .element on hover, the transition effect will be applied to those properties.
Note: The transition-property property works in conjunction with other transition-related properties like transition-duration, transition-timing-function, and transition-delay to control the timing and behavior of the transition effect.
transition-duration
In this property, you define the amount of time it takes for a CSS property to change from one value to another during a transition. In simpler terms, it determines how fast or slow the transition effect happens.
You can specify the duration in seconds (s) or milliseconds (ms) using a numerical value. For instance, 0.5s means half a second, and 1000ms means one second.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS transition Example</title>
<!-- Internal CSS -->
<style>
.element {
width: 100px;
height: 50px;
background-color: #60CA00;
transition-property: background-color, width;
transition-duration: 3s;
}
.element:hover {
background-color: #16BBB9;
width: 300px;
}
</style>
</head>
<body>
<div class="element">Hover on me</div>
</body>
</html>In the example above, when you change the background color and width of the .element on hover, it will take 1 second to smoothly transition to their new values.
transition-timing-function
This property allows you to specify a timing function, which is essentially a mathematical function that defines the pace or rhythm of the transition over time. There are several predefined timing functions you can use, each with its unique effect. The timing functions are:
- ease: This is the default and most commonly used timing function. It starts slow, speeds up in the middle, and slows down again at the end, creating a smooth and natural effect.
- linear: This timing function makes the transition progress at a constant speed from start to finish, creating a steady and uniform change.
- ease-in: The transition starts slow and gradually speeds up, making it appear to "ease into" the final state.
- ease-out: The transition starts at a regular pace and then slows down at the end, creating an "easing out" effect.
- ease-in-out: This timing function combines the ease-in and ease-out effects, starting slow, speeding up, and then slowing down at the end.
- cubic-bezier(x1, y1, x2, y2): This timing function is used for creating custom timing functions for transitions and animations. It takes four values x1, y1, x2, y2 and each value must be within the range of 0 to 1.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS transition Example</title>
<!-- Internal CSS -->
<style>
.element {
width: 100px;
height: 50px;
background-color: #60CA00;
transition-property: background-color, width;
transition-duration: 3s;
transition-timing-function: ease;
}
.element:hover {
background-color: #16BBB9;
width: 500px;
}
</style>
</head>
<body>
<div class="element">Hover on me</div>
</body>
</html>transition-delay
This property allows you define a waiting period, specified in seconds (s) or milliseconds (ms), before the transition takes place. During this delay, the element retains its initial state before gradually transitioning to the new state.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS transition Example</title>
<!-- Internal CSS -->
<style>
.element {
width: 100px;
height: 50px;
background-color: #60CA00;
transition-property: background-color, width;
transition-duration: 3s;
transition-timing-function: ease-in;
transition-delay: 1s;
}
.element:hover {
background-color: #16BBB9;
width: 500px;
}
</style>
</head>
<body>
<div class="element">Hover on me</div>
</body>
</html>transition property
The transition shorthand property in CSS allows you to set multiple transition-related properties in one declaration. It simplifies the process of defining transitions for one or more elements. The transition property combines several individual properties into one line, making your CSS code more concise and easier to manage.
selector {
transition: property duration timing-function delay, ...;
}<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS transition Example</title>
<!-- Internal CSS -->
<style>
.element {
width: 100px;
height: 50px;
background-color: #60CA00;
transition: background-color 3s ease-in 1s, width 3s ease-in 1s;
}
.element:hover {
background-color: #16BBB9;
width: 500px;
}
</style>
</head>
<body>
<div class="element">Hover on me</div>
</body>
</html>Set Multiple Values to Transition Properties
You can set multiple values to transition properties separated by commas for individual CSS properties.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS transition Example</title>
<!-- Internal CSS -->
<style>
.element {
width: 100px;
height: 50px;
background-color: #60CA00;
transition-property: background-color, width;
transition-duration: 1s, 2s;
transition-timing-function: ease-in, ease-out;
transition-delay: 0.5s, 2s;
}
.element:hover {
background-color: #16BBB9;
width: 500px;
}
</style>
</head>
<body>
<div class="element">Hover on me</div>
</body>
</html>In the above example, for background-color and width properties, we set the transition-duration to 1s, 2s, transition-timing-function to ease-in, ease-out and transition-delay to 0.5s, 2s respectively.
3D Animation using Transition
You can create a 3D animation using the transition properties along with the transform property. Let's create a 3D vertical flip animation.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS transition Example</title>
<!-- Internal CSS -->
<style>
.element {
width: 150px;
height: 150px;
margin-left: 50px;
background-color: #60CA00;
font-size: 150px;
text-align: center;
line-height: 150px;
cursor: pointer;
transition-property: background-color, transform, border-radius;
transition-duration: 1.5s;
transition-timing-function: ease-in;
transition-delay: 0.5s;
}
.element:hover {
background-color: #16BBB9;
transform: perspective(100px) rotateX(180deg);
border-radius: 20px;
}
</style>
</head>
<body>
<p>Hover on the element using mouse pointer</p>
<div class="element">A</div>
</body>
</html>