How to make transition affect property that is used in animation?

Question

I can't make transition on 'color' work because this property is used in a startup animation. However 'background-color' behaves how it should.

This is my CSS:

div{
    font-size: 7rem;
    
    animation-name: appearance;
    animation-duration: 2s;
    animation-fill-mode: forwards;
    
    transition: background-color 2s, color 2s;
}

div:hover{
    background-color: black;
    color: white;  
    animation-fill-mode: none;
}

@keyframes appearance{

    0%{
        color: white;
    }

    100%{
        color: black;
    }
}

JSFiddle that demostrates what I mean

Any tips to make transition work?

Answer 1

You need to wrap it into another div/section. You can find the working snippet below.

I have wrapped it into a section, and given the page load animation to the section, while the hover effect to the div.

section {
  animation-name: appearance;
  animation-duration: 2s;
  animation-fill-mode: forwards;
  color: black;
}

div {
  font-size: 7rem;
  transition: all 2s ease;
}

div:hover {
  background-color: black;
  color: white;
  animation-fill-mode: none;
}

@keyframes appearance {
  0% {
    color: white;
  }

  100% {
    color: black;
  }
}

<section>
  <div>
    text
  </div>
</section>