Estoy codificando la función de marquesina y quiero mostrar la matriz de datos. Quiero que muestre un valor único en la marquesina y actualmente codifico el tiempo de animación, pero quiero usar la variable en lugar de calcular el tiempo de retraso de la animación (1.66, 3.33).

Lo que logré ahora: mostrar 2 valores en la marquesina al mismo tiempo

codigosandbox

JS:

 import styles from "../styles/Page1.module.css"; function Marquee(props) { return props.data.map((data) => ( <p key={data.key} style={{ "animation-delay": `${data.delay}s` }}> {data.data} </p> )); } export default function Page1() { const data = [ { data: "cosmopolitan", //(Triple sec + vodka + lime juice + cranberry juice) key: "1", delay: "0", }, { data: "screwdriver", //(orange juice + vodka) key: "2", delay: "1.66", }, , { data: "Mojito", key: "3", delay: "3.33", }, ]; return ( <div className={styles.marquee}> <Marquee data={data} /> </div> ); }

CSS:

 .marquee { height: 30px; overflow: hidden; position: relative; background: #fefefe; color: #333; border: 1px solid #4a4a4a; } .marquee p { position: absolute; width: 100%; height: 100%; margin: 0; line-height: 30px; text-align: left; transform: translateX(100%); /* animation: scroll-left 20s linear infinite; */ animation-name: scroll-left; animation-duration: 5s; animation-timing-function: linear; animation-iteration-count: infinite; } @keyframes scroll-left { 0% { transform: translateX(100%); } 100% { transform: translateX(-100%); } }