CSS3 transitions are a powerful tool that allows you to smoothly animate changes in CSS properties over a period of time.
With just a few lines of code, you can make elements change color, size, or position when users interact with them.
With transitions, you can create engaging and interactive web experiences that respond to user input and help convey information.
This article will explore CSS3 transitions in-depth, covering everything you need to know to get started with this powerful technique.
We’ll look at the syntax for transitions, how to use them with different CSS properties, and provide code examples along the way.
The basic syntax for CSS3 Transitions
The basic syntax for creating a CSS3 transition is as follows:
selector {
transition: property duration timing-function delay;
}selector: The element or elements that you want to apply the transition to.property: The CSS property that you want to animate.duration: The length of time that the animation should take to complete.timing-function: The rate of change of the animation over time. This can be linear, ease-in, ease-out, ease-in-out, or a cubic-bezier value.delay: The length of time to wait before starting the animation.
Example of a basic CSS3 transition that changes the background color of a button element when it is hovered over:
button {
background-color: #FF5733;
transition: background-color 0.5s ease-in-out;
}
button:hover {
background-color: #E74C3C;
}
Multiple Property Transitions
You can also apply transitions to multiple CSS properties by separating them with commas:
button {
background-color: #FF5733;
color: #FFFFFF;
transition: background-color 0.5s ease-in-out, color 0.5s ease-in-out;
}
button:hover {
background-color: #E74C3C;
color: #000000;
}
Custom Timing Functions
In addition to the predefined timing functions, you can also create your own custom timing functions using the cubic-bezier() function. This function takes four values between 0 and 1 that define the rate of change over time.
Here is an example of a custom timing function that creates a bouncing effect:
button {
background-color: #FF5733;
transition: background-color 1s cubic
}Transitioning a button’s background color when hovered over:
button {
background-color: blue;
transition: background-color 0.5s ease;
}
button:hover {
background-color: red;
}
Transitioning an image’s opacity when hovered over:
img {
opacity: 1;
transition: opacity 0.5s ease;
}
img:hover {
opacity: 0.5;
}Transitioning a box’s position when clicked:
.box {
position: relative;
left: 0;
transition: left 0.5s ease;
}
.box.clicked {
left: 200px;
}
Transitioning a paragraph’s font size and color when hovered over:
p {
font-size: 16px;
color: black;
transition: font-size 0.5s ease, color 0.5s ease;
}
p:hover {
font-size: 20px;
color: blue;
}
Transitioning a div’s size and border radius on hover:
div {
width: 100px;
height: 100px;
border-radius: 10px;
background-color: blue;
transition: width 0.5s ease, height 0.5s ease, border-radius 0.5s ease;
}
div:hover {
width: 150px;
height: 150px;
border-radius: 50%;
background-color: red;
}
Transitioning a text’s color on hover:
a {
color: black;
transition: color 0.5s ease;
}
a:hover {
color: blue;
}
Transitioning a dropdown menu on hover:
ul {
opacity: 0;
visibility: hidden;
transition: opacity 0.3s ease, visibility 0.3s ease;
}
li:hover ul {
opacity: 1;
visibility: visible;
}
Transitioning a progress bar:Transitioning a progress bar:
progress {
width: 200px;
height: 20px;
background-color: #f2f2f2;
}
progress::-webkit-progress-value {
background-color: blue;
transition: width 0.5s ease;
}
progress:hover::-webkit-progress-value {
width: 100%;
}
Transitioning a button’s font size and background color on hover:
button {
font-size: 16px;
background-color: blue;
transition: font-size 0.3s ease, background-color 0.3s ease;
}
button:hover {
font-size: 20px;
background-color: red;
}
Transitioning a card’s shadow and border radius on hover:
.card {
width: 200px;
height: 300px;
background-color: white;
border-radius: 10px;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
transition: box-shadow 0.3s ease, border-radius 0.3s ease;
}
.card:hover {
box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.6);
border-radius: 20px;
}Transitioning an image’s size and position on hover:
img {
width: 200px;
height: 200px;
position: relative;
left: 0;
transition: width 0.3s ease, height 0.3s ease, left 0.3s ease;
}
img:hover {
width: 250px;
height: 250px;
left: 50px;
}
Transitioning a navigation menu on hover:
nav ul li {
display: inline-block;
margin-right: 10px;
transition: transform 0.3s ease;
}
nav ul li:hover {
transform: scale(1.2);
}
soorya