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>

ReactJS点击并按住按钮

1 个答案: