title: CSS animating text color on hover doesn't work
body: <p>I have three cards on my page, made with their individual divs, which I want to animate when the user hovers over them. I want to change the background of the divs a little, make the text white from black, and increase the font size a little. The code for it is</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>@keyframes card-highlight {
    from {
      color: rgb(0, 0, 0);
      font-size: 2rem;
      background: rgba(255, 255, 255, 0);
    }
    to {
      color: rgb(255, 255, 255);
      font-size: 2.2rem;
      background: rgba(255, 255, 255, 0.3);
    }
  }
  
  .with-padding {
    margin: 90px 50px;
    padding: 150px 0px;
    background: rgba(255, 255, 255, 0);
    border: 3px solid black;
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    font-family: 'Raleway', sans-serif;
    color: black;
    font-size: 2rem;
  }
  
  .with-padding:hover {
    animation-name: card-highlight;
    animation-duration: 0.3s;
    animation-fill-mode: forwards;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class='row second-page'&gt;
    &lt;div class='col-xl-3 col-md-6 col-sm-12 with-padding'&gt;
      &lt;a href=''&gt;
        &lt;h1&gt;- About -&lt;/h1&gt;
      &lt;/a&gt;
    &lt;/div&gt;
    &lt;div class='col-xl-3 col-md-6 col-sm-12 with-padding'&gt;
      &lt;a href=''&gt;
        &lt;h1&gt;- Projects -&lt;/h1&gt;
      &lt;/a&gt;
    &lt;/div&gt;
    &lt;div class='col-xl-3 col-md-6 col-sm-12 with-padding'&gt;
      &lt;a href=''&gt;
        &lt;h1&gt;- Résumé -&lt;/h1&gt;
      &lt;/a&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>However, when I hover over the element, only the background color changes, but not the text color and the font size.
  I am using bootstrap, but I don't think it should have any effect on the animation, right? Plus, I am animating the font color elsewhere on the page, and that works. The CSS for that is</p>
  <pre><code>@keyframes colorfadein-transparent {
      from{color:rgba(0, 0, 0, 0);}
      to{color: rgb(80, 80, 80);}
  }
  
  .different-font {
      color: rgba(0, 0, 0, 0);
      font-size: 180px;
      font-family: 'Fredericka the Great', sans-serif;
      font-weight: 400;
  
      animation-name: colorfadein-transparent;
      animation-delay: 0.5s;
      animation-duration: 0.6s;
      animation-fill-mode: forwards;
      animation-timing-function: ease-out;
  }
  
  </code></pre>