Why are Animation target values reset when animation ends?

Question

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.

This is the JSX of the card I want to render:

import React from 'react';

function FeatureCard({icon, title, text}: {icon:any, title:string, text:string}) {
    console.log(icon);
    return (
        <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'}>
        </article>
    );
}

export default FeatureCard;

And this is the tailwind.config.js file where I added the animation and the background color keyframes for the card:

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: {
          "card-bg-animation": 'card-bg-animation-kf 500ms linear',
        },
        keyframes: {
      
          "card-bg-animation-kf": {
              from:{backgroundColor:'#FFF'},
              to:{backgroundColor:'#000'}
          }

        },
        backgroundImage: {
          'home-banner': "url('/src/img/bakbaner.png')"
        },
        backgroundPosition: {
          'home-banner-position': '-200px 200px'
        }
      },
    },
    variants: {
      extend: {
        animation: ['hover', 'focus', 'group-hover']
      },
    },
    plugins: [
      //require('@tailwindcss/forms'), // import tailwind forms
   ],
  }

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?

Answer 1

You probably have to set the animation-fill-mode to "forwards" to keep the animation state at the end.

animation-fill-mode: forwards;

Ie. in add forwards ti the following line

"card-bg-animation": 'card-bg-animation-kf 500ms linear forwards',

See: https://developer.mozilla.org/en-US/docs/Web/CSS/animation-fill-mode