为啥动画结束时动画目标值会重置？

Posted 2023-03-06

【中文标题】为啥动画结束时动画目标值会重置？

【英文标题】：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
   ],
  

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

【参考方案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