Topic: Animation Duration not working
When hovering a certain text, I wanted it to change color in a calm manner using the well-known Animation Duration tag, but it doesn't seem to work. Here is my code:
CSS:
.accentcolorghover{
-webkit-animation-duration: 2s;
animation-duration: 2s;
}
.accentcolorghover:hover{
color: #34A853;
}
HTML:
<h1 class="display-2 mb-2 wow fadeInDown gfont animated accentcolorghover" data-wow-delay="0.3s" style="visibility: visible; animation-name: fadeInDown; animation-delay: 0.3s;">Sethu</span> <span class="accentcolor">Senthil</h1>
Add comment
Hi,
try something like the example below - just customize the code to your needs.
HTML:
<h1>Senthil</h1>
CSS:
h1:hover {
-webkit-animation: accentcolor 5s;
-webkit-animation-name: accentcolor;
}
@-webkit-keyframes accentcolor {
0% {color: black;}
50% {color: pink;}
100% {color: hotpink;}
}FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Status
Specification of the issue
- ForumUser: Free
- Premium support: No
- Technology: General Bootstrap questions
- MDB Version: -
- Device: -
- Browser: -
- OS: -
- Provided sample code: No
- Provided link: No
Tags