There are a couple of styles:

tr:hover { background-color: var(--hover-color); transition: .2s ease; } tr:active { background-color: var(--link-color); transition: .05s ease; }

The task is to ensure that after clicking on the line --link-color there is still half a second through the transition-delay: .5s . In this case, you can not allow delays in the usual hover - only from :active to :hover .

    2 answers 2

    Obviously, you need to catch :focus . To make the animation @keyframes only 1 time after clicking, we will do it through @keyframes :

     :root { --main-color: #000; --hover-color: #999; --active-color: #ccc; } button { background-color: var(--main-color); color: #fff; padding: 15px 30px; border: 0; transition: background-color .3s; } button:focus { animation: focus 1s ease; /*сделал задержку дольше, для очевидности*/ } button:hover { background-color: var(--hover-color); } button:active { background-color: var(--active-color); animation:none;/*сбрасываем анимацию при нажатии*/ } @keyframes focus { from { background-color: var(--active-color); } 50%{ background-color: var(--active-color); } to { background-color: var(--hover-color); } } 
     <button>click me</button>

      With :hover:active .

       :root { --main-color: #000; --hover-color: #999; --active-color: #ccc; } button { background-color: var(--main-color); color: #fff; padding: 15px 30px; border: 0; transition: background-color .3s; } button:hover { background-color: var(--hover-color); } button:hover:active { background-color: var(--active-color); transition-delay: .2s; } 
       <button>click me</button>

      • but this gives a delay before the animation of pressing, and not after it - lisovskey