ReactJS Click and Hold Button

Question

I'm creating a React App which is able to shut down physical devices (like power sources etc.) For every device, I have a shutdown button which needs to be pressed and hold for 3 seconds to activate. In addition to that, I need a animation that shows the remaining time of this 3 seconds to the user: which exactly looks like : http://sonsoleslp.github.io/react-click-n-hold/

However, I am getting errors when I import the CSS to my CSS file that is

 @-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; } 

Whole CSS code is up there.

I tried changing the CSS but animation does not work this time. Is there any suggestion?

Answer 1

It works if you add from{} before 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>