Topic: Animation Duration not working

Sethu free asked 5 years ago

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>

Magdalena Obalska free answered 5 years ago

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;}

Please insert min. 20 characters.


Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.


Specification of the issue

  • User: Free
  • Premium support: No
  • Technology: General Bootstrap questions
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No