为什么动画结束时动画目标值会重置？答案

【问题标题】：Why are Animation target values reset when animation ends?为什么动画结束时动画目标值会重置？
【发布时间】：2021-09-08 16:33:39
【问题描述】：

我要做的是为光标在它上面时拥有的 React 组件的背景颜色创建从白色到黑色的过渡。

这是我要渲染的卡片的 JSX：

从“反应”导入反应；

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;

这是我为卡片添加动画和背景颜色关键帧的 tailwind.config.js 文件：

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
   ],
  }

这以某种方式起作用，并且过渡已完成，但是在动画结束后，背景颜色立即重置为白色。为什么会这样？在我将光标移出卡片之前，它不应该一直保持黑色吗？

【问题讨论】：

标签： html css reactjs animation tailwind-css

【解决方案1】：

您可能必须将动画填充模式设置为“向前”以在最后保持动画状态。

animation-fill-mode: forwards;

即。在添加转发ti以下行

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

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

【讨论】：