title: Why are Animation target values reset when animation ends?
body: <p>What I'm trying to do is create a transition from white to black for the background color of a React component I have when the cursor is on it.</p>
  <p>This is the JSX of the card I want to render:</p>
  <p>import React from 'react';</p>
  <pre><code>function FeatureCard({icon, title, text}: {icon:any, title:string, text:string}) {
      console.log(icon);
      return (
          &lt;article className={'border flex flex-col items-center py-4 px-2 text-center w-3/12 h-60 overflow-hidden group hover:animate-card-bg-animation'}&gt;
          &lt;/article&gt;
      );
  }
  
  export default FeatureCard;
  </code></pre>
  <p>And this is the tailwind.config.js file where I added the animation and the background color keyframes for the card:</p>
  <pre><code>const colors = require('tailwindcss/colors')
  
  module.exports = {
     purge: ['./src/**/*.{js,jsx,ts,tsx}', './public/index.html'],
      darkMode: false, // or 'media' or 'class'
      theme: {
        extend: {
          animation: {
            &quot;card-bg-animation&quot;: 'card-bg-animation-kf 500ms linear',
          },
          keyframes: {
        
            &quot;card-bg-animation-kf&quot;: {
                from:{backgroundColor:'#FFF'},
                to:{backgroundColor:'#000'}
            }
  
          },
          backgroundImage: {
            'home-banner': &quot;url('/src/img/bakbaner.png')&quot;
          },
          backgroundPosition: {
            'home-banner-position': '-200px 200px'
          }
        },
      },
      variants: {
        extend: {
          animation: ['hover', 'focus', 'group-hover']
        },
      },
      plugins: [
        //require('@tailwindcss/forms'), // import tailwind forms
     ],
    }
  </code></pre>
  <p>This works somehow, and the transition is done but, right after the animation ends the background color is reset to white. Why is this happening? Shouldn't it stay black until I make the cursor out of the card?</p>