Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Set the Speed of the Hover Effect with CSS
To set the speed of the hover effect with CSS, we will be using two different approaches. These approaches includes using CSS transition and CSS animation properties.
We are having a button and a div element which changes the styles upon hovering on them. Our task is to set the speed of the hover effect with CSS.
Approaches to Set the Speed of the Hover Effect with CSS
Here is a list of approaches to set the speed of the hover effect with CSS which we will be discussing in this article with step-wise explaination and complete example codes.
Set Speed Using transition Property
To set the speed of the hover effect, we have used CSS transition-duration property.
- we have used btn class to set style for the button using background-color, border, text-align, color, padding, border-radius and font-size which sets the initial appearence of the button.
- We have used .btn:hover class to change the button appearence after hovering on it.
- we have used 'transition-duration: 1s;' property which changes the speed of hover effect.
Example
Here is a complete example code implementing above mentioned steps to set the speed of the hover effect with CSS.
<!DOCTYPE html>
<html>
<head>
<title>
Set the speed of the hover effect with CSS
</title>
<style>
.btn {
background-color: yellow;
color: black;
text-align: center;
font-size: 15px;
padding: 20px;
border-radius: 15px;
border: 3px dashed rgb(38, 2, 45);
transition-duration: 1s;
}
.btn:hover {
background-color: #04af2f;
color: white;
border: 3px solid rgb(38, 2, 45);
}
</style>
</head>
<body>
<h3>
Set the speed of the hover effect with CSS
</h3>
<p>
In this example we have used CSS transition-
duration property to Set the speed of the
hover effect with CSS.
</p>
<h4>Hover over this button to see the effect.</h4>
<button class = "btn">Result</button>
</body>
</html>
Set Speed Using animation Property
In this approach we have used CSS animation-duration property to set the speed of the hover effect.
- We have created a box using div tag with class name box.
- We have used box class to style the box using CSS height, width and background-color property.
- We have set animation for initial, 50% and 100% using '@keyframes speed'.
- We have used box:hover class to set the animation effect on hover which defines animation-name and animation-timing-function.
- We have used 'animation-duration: 0.9s;' property which sets the speed of the hover effect.
Example
Here is a complete example code implementing above mentioned steps to set the speed of the hover effect with CSS.
<!DOCTYPE html>
<html lang="en">
<head>
<title>
Set the speed of the hover effect with CSS
</title>
<style>
.box {
width: 100px;
height: 100px;
background-color: rgb(38, 2, 45);
}
@keyframes speed {
0% {
width: 100px;
height: 100px;
background-color: rgb(38, 2, 45);
}
50% {
width: 150px;
height: 150px;
background-color: rgb(156, 141, 252);
}
100% {
width: 200px;
height: 200px;
background-color: #04af2f;
}
}
.box:hover {
animation: speed ease forwards;
animation-duration: 0.9s;
}
</style>
</head>
<body>
<h3>
Set the speed of the hover effect with CSS
</h3>
<p>
In this example we have used CSS animation-
duration property to Set the speed of the
hover effect with CSS.
</p>
<div class="box"></div>
</body>
</html>
Conclusion
In this article we have discussed and understood two approaches to set the speed of the hover effect with CSS using CSS transition-duration and animation-duration properties.
14K+ Views
