ReactJS单击并按住按钮

Question

我正在创建一个能够关闭物理设备（如电源等）的React App。对于每个设备，我都有一个关机按钮，需要按住并按住3秒才能激活。除此之外，我还需要一个动画，向用户显示这3秒的剩余时间：完全如下：http://sonsoleslp.github.io/react-click-n-hold/

但是，当我将CSS导入我的CSS文件时，我收到错误

@-webkit-keyframes fill { 
    to {
        background-size: 100% 0; 
    }
} 

@keyframes fill { 
    to { 
        background-size: 100% 0;
    }
}

.cnh_holding button {
    background: -webkit-linear-gradient( white , white) rgb(255,215,235) no-repeat 0 0;
    background: linear-gradient( white , white) rgb(255,215,235) no-repeat 0 0;
    mix-blend-mode: multiply;
    background-size: 100% 100%;
    -webkit-animation: fill 2s forwards;
    animation: fill 2s forwards;
}

整个CSS代码就在那里。

我尝试更改CSS但这次动画不起作用。有什么建议吗？

Answer 1

如果你在from{}之前添加to{}它会起作用

@-webkit-keyframes fill { 
from {background-size: 100% 100%;}
    to {
        background-size: 100% 0; 
    }
} 

@keyframes fill { 
from {background-size: 100% 100%;}
    to { 
        background-size: 100% 0;
    }
}
.cnh_holding button {
    background: -webkit-linear-gradient( white , white) rgb(255,215,235) no-repeat 0 0;
    background: linear-gradient( white , white) rgb(255,215,235) no-repeat 0 0;
    mix-blend-mode: multiply;
    background-size: 100% 100%;
    -webkit-animation: fill 2s forwards;
    animation: fill 2s forwards;
}

<div class="cnh_holding"><button>CLICK</button></div>