Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Selected Reading
Set the speed of the hover effect with CSS
To set the speed of the hover effect with CSS, we can control how quickly style changes occur when users hover over elements. This is achieved using two main approaches: CSS transition properties and CSS animation properties.
Syntax
/* Using transition */
selector {
transition-duration: time;
}
/* Using animation */
selector:hover {
animation-duration: time;
}
Method 1: Using transition-duration Property
The transition-duration property sets how long a transition takes to complete. This creates smooth changes between normal and hover states −
<!DOCTYPE html>
<html>
<head>
<style>
.btn {
background-color: #3498db;
color: white;
padding: 15px 30px;
border: none;
border-radius: 8px;
font-size: 16px;
cursor: pointer;
transition-duration: 0.5s;
}
.btn:hover {
background-color: #e74c3c;
transform: scale(1.1);
}
</style>
</head>
<body>
<h3>Hover Speed Control with Transition</h3>
<button class="btn">Hover Me</button>
</body>
</html>
A blue button that smoothly transitions to red and scales up over 0.5 seconds when hovered.
Method 2: Using animation-duration Property
The animation-duration property controls the speed of keyframe animations triggered on hover −
<!DOCTYPE html>
<html>
<head>
<style>
.box {
width: 120px;
height: 120px;
background-color: #9b59b6;
margin: 20px;
border-radius: 10px;
}
@keyframes growAndChange {
0% {
width: 120px;
height: 120px;
background-color: #9b59b6;
}
50% {
width: 160px;
height: 160px;
background-color: #f39c12;
}
100% {
width: 200px;
height: 200px;
background-color: #27ae60;
}
}
.box:hover {
animation: growAndChange forwards;
animation-duration: 1.2s;
}
</style>
</head>
<body>
<h3>Hover Speed Control with Animation</h3>
<div class="box"></div>
</body>
</html>
A purple square that grows in size and changes color through orange to green over 1.2 seconds when hovered.
Speed Values Comparison
| Duration | Effect | Best For |
|---|---|---|
| 0.1s - 0.3s | Very fast | Button highlights, small changes |
| 0.3s - 0.6s | Medium speed | General hover effects, color changes |
| 0.6s - 1s | Slow | Complex animations, dramatic effects |
Conclusion
Both transition-duration and animation-duration properties effectively control hover effect speed. Transitions work best for simple property changes, while animations provide more complex, multi-step effects with precise timing control.
Updated on: 2026-03-15T12:56:12+05:30
15K+ Views
Advertisements