Почему переходы css не работают с: target?

Question

CSS код.

   div{
        background-color: white;
    }
   :target{
        background-color: whitesmoke;
        transition:background-color 1s linear;
    }

переходы не работают с целевым div, почему? здесь анимация будет работать?

Answer 1

Может быть, это может быть вам полезно. Пожалуйста, дайте мне знать. Спасибо

div{
    background: #B3D3EA;
} 
    
:target{
     background: whitesmoke;
     transition:background-color 1s linear;
}

<p><a href="#news1">Click Here 1</a></p>
<p><a href="#news2">Click Here 2</a></p>

<div id="news1"><b>New content 1...</b></div>
<div id="news2"><b>New content 2...</b></div>

Answer 2

Здесь анимация будет более полезной.

       :target{
            animation-name: example;
            animation-duration: 2s;
            animation-iteration-count: 1;
            animation-timing-function: linear;
        }
        @keyframes example {
            from {background-color: whitesmoke;}
            to {background-color: white;}
        }

у меня сработало.