• Empleos
  • Sobre nosotros
  • profesionales
    • Inicio
    • Empleos
    • Cursos y retos
    • Preguntas
    • Profesores
  • empresas
    • Inicio
    • Publicar vacante
    • Nuestro proceso
    • Precios
    • Pruebas Online
    • Nómina
    • Blog
    • Comercial
    • Calculadora de salario

0

103
Vistas
Cómo saber programáticamente cuál es el último objeto que tiene la animación

¿Hay alguna manera de saber mediante programación en qué objeto se aplica la animación CSS en último lugar?

Por ejemplo,

 .r1 { animation-name: move1; animation-delay: 2.5s; animation-duration: 1s; animation-iteration-count: 1; animation-timing-function: ease-in; animation-direction: normal; animation-fill-mode: forwards; } .c1 { animation-name: blink; animation-delay: 0.5s; animation-duration: 1s; animation-iteration-count: 2; animation-timing-function: ease-in; animation-direction: normal; animation-fill-mode: forwards; } /*.text1 { animation-name: scl; animation-delay: 5.5s; animation-duration: 1s; animation-iteration-count: 2; animation-timing-function: ease-in; animation-direction: normal; animation-fill-mode: forwards; }*/ .r2 { transform-origin: center; transform-box: fill-box; animation-name: gr; animation-delay: 3.5s; animation-duration: 2s; animation-iteration-count: 1; animation-timing-function: ease-in; animation-direction: normal; animation-fill-mode: forwards; } .r3 { animation-name: move2; animation-delay: 7.5s; animation-duration: 1s; animation-iteration-count: 1; animation-timing-function: ease-in; animation-direction: normal; animation-fill-mode: forwards; } @keyframes move1 { to { transform: translateX(200px); } } @keyframes blink { from { opacity: 0; } to { opacity: 1; } } @keyframes gr { from { transform: rotate(0deg); } to { transform: rotate(359deg); } } @keyframes scl { to { transform: scale(1.1); } } @keyframes move2 { to { transform: translateY(400px); } } }
 <svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1280 720"> <rect id="r1" class="r1" x="10" y="20" width="100" height="100" fill="red" /> <rect id="r2" class="r2" x="10" y="130" width="100" height="100" fill="green" /> <rect id="r3" class="r3" x="10" y="240" width="100" height="100" fill="blue" /> <circle id="c1" class="c1" cx="50" cy="400" r="40" fill="orange" /> <text class="text1" id="text1" x="80" y="500" font-size="30" fill="red">I love SVG!</text> </svg>

En esto, tengo 5 elementos y estoy aplicando animación en 4 de ellos y r3 es el último elemento en el que se aplica la animación. ¿Hay alguna manera de que pueda detectar el animation-delay+animation-duration de animación para r3 , el último elemento en el que se aplica la animación con javascript?

about 3 years ago · Santiago Trujillo
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Nuestro proceso Comercial
Legal
Términos y condiciones Política de privacidad
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recomiéndame algunas ofertas
Necesito ayuda