soy nuevo en reaccionar, quiero hacer un reloj de cuenta regresiva y una animación de volteo y el problema es que la pantalla no es lo que esperaba aquí está el código de reacción:

 useEffect(()=>{setTimeout(()=>{ setSecond(sec==0?59:sec-1); if(sec==0){ setMinute(minute==0?59:minute-1); if(minute==0){ setHour(hour==0?23:hour-1); if(hour==0) setDay(day-1); } checkAnimation(!animation) } },1000); },[sec]); <div className="time-countdown"> { time.map((value,key)=>{ return( <div value-before={value<=0?0:value-1} value-after={value} key={key} className={`count-down `}> <div className={`face ${animation?"":"flip"}`}> <div className="front-face">{value<=0?0:value-1}</div> <div className="back-face">{value}</div> </div> </div> ); }) }

`

y aqui esta el css

 .time-countdown{ display: flex; flex-flow:row wrap; justify-content: space-around; width: 90%; } .count-down{ position: relative; width: 65px; height: 60px; font-size: 45px; box-shadow: 5px 5px 10px black; border-radius: 10px; margin: 0 5px; z-index: 0; } .count-down::after,.count-down::before{ display: flex; position: absolute; overflow: hidden; width:100%; height:50%; justify-content: center; overflow: hidden; } .count-down::before{ content: attr(value-after); bottom:0; align-items: flex-end; } .count-down::after{ content:attr(value-before); top : 0; align-items: flex-start; } .face{ position: relative; width: 100%; height: 50%; z-index: 1; transform-origin: bottom; transform-style: preserve-3d; } .flip{ animation-name:animation; animation-duration: 1s; animation-iteration-count: infinite; animation-fill-mode: backwards; animation-timing-function: ease-out; } .front-face,.back-face{ position: absolute; display: flex; position: absolute; justify-content: center; width: 100%; height: 100%; overflow: hidden; } .front-face{ align-items:flex-end ; transform: rotateX(-180deg) ; } .back-face{ align-items:flex-start ; } .front-face,.count-down::before,.count-down::after{ background-color: var(--darkblue); }

Parece que el tiempo siempre adelanta a la animación porque hay un breve retraso entre la transición, como resultado, la transición se ejecuta cada 2 segundos, quiero que se ejecute al mismo tiempo, ¿alguna idea?