Aprende Animaciones y Efectos Visuales en Desarrollo Web Avanzado

Question 1

¿Qué propiedad CSS define la duración de una animación?

Accepted Answer

animation-duration

Answer

animation-delay

Answer

animation-timing-function

Answer

animation-iteration-count

Question 2

¿Qué función de sincronización de animación CSS acelera una animación al principio y la desacelera al final?

Accepted Answer

ease-in-out

Answer

ease-in

Answer

ease-out

Answer

linear

Question 3

¿Qué transición CSS genera un efecto de fundido?

Accepted Answer

opacity

Answer

transform

Answer

background-color

Question 4

¿Qué evento de JavaScript se dispara cuando finaliza una transición CSS?

Accepted Answer

transitionend

Answer

load

Answer

animationend

Answer

change

Question 5

¿Qué propiedad de CSS se utiliza para establecer la duración de una animación?

Accepted Answer

animation-duration

Answer

duration-animation

Answer

animation-length

Answer

time-animation

Question 6

¿Qué evento de JavaScript se activa cuando finaliza una transición?

Accepted Answer

transitionend

Answer

transitionFinish

Answer

transitionComplete

Answer

endTransition

Question 7

¿Cuál de las siguientes es una función de aceleración de animación válida?

Accepted Answer

ease-in-out

Answer

aceleración-constante

Answer

lineal-rápida

Answer

velocidad-constante

Question 8

¿Qué propiedad de CSS se utiliza para establecer el retardo de una animación?

Accepted Answer

animation-delay

Answer

animation-offset

Answer

delay-time

Answer

delay-animation

Question 9

¿Qué técnica se utiliza para crear animaciones suavizadas mediante la interpolación de valores?

Accepted Answer

Tweening

Answer

Morphing

Answer

Easing lineal

Answer

Keyframing avanzado

Question 10

¿Qué principio de diseño de UX enfatiza la importancia de proporcionar transiciones fluidas entre las pantallas?

Accepted Answer

Continuidad

Answer

Usabilidad

Answer

Consistencia

Question 11

¿Cuál de los siguientes navegadores web no admite animaciones CSS?

Accepted Answer

Internet Explorer 9

Answer

Mozilla Firefox

Answer

Safari

Answer

Google Chrome

Question 12

¿Qué propiedad CSS define la duración de una animación?

Accepted Answer

animation-duration

Answer

transition-duration

Answer

speed

Question 13

¿Qué regla CSS se emplea para crear fotogramas clave en una animación?

Accepted Answer

@keyframes

Answer

@animation

Answer

@transform

Answer

@transition

Question 14

¿Qué propiedad CSS define la función de interpolación de una animación?

Accepted Answer

animation-timing-function

Answer

smoothness

Answer

timing

Answer

transition-easing

Question 15

¿Cuál de los siguientes es un beneficio de emplear animaciones y transiciones en interfaces de usuario?

Accepted Answer

Mejoran la experiencia del usuario

Answer

Reducen el ancho de banda utilizado

Answer

Ahorran espacio en pantalla

Answer

Disminuyen los tiempos de carga

Question 16

¿Cuál propiedad CSS establece la duración de una animación?

Accepted Answer

animation-duration

Answer

animation-name

Answer

animation-delay

Answer

animation-iteration-count

Question 17

¿Qué función de interpolación CSS genera una transición fluida con aceleración inicial y desaceleración final?

Accepted Answer

ease-in-out

Answer

ease-out

Answer

ease-in

Question 18

¿Qué librería de JavaScript se emplea comúnmente para crear animaciones complejas?

Accepted Answer

TweenMax

Answer

d3.js

Answer

Animate.css

Answer

jQuery

Question 19

¿Qué técnica de animación crea una ilusión de movimiento a través de una secuencia de imágenes estáticas?

Accepted Answer

Animación por cuadros

Answer

Animación por transformación

Answer

Animación por transición

Answer

Animación por interpolación

Question 20

¿Qué propiedad CSS establece la dirección de una animación?

Accepted Answer

animation-direction

Answer

animation-play-state

Answer

animation-fill-mode

Answer

animation-timing-function

Question 21

¿Qué método de JavaScript detiene una animación?

Accepted Answer

cancelAnimationFrame()

Answer

stopAnimation()

Answer

endAnimation()

Answer

pauseAnimation()

Question 22

¿Cuál es un beneficio del uso de animaciones en las interfaces de usuario?

Accepted Answer

Mejoran la experiencia del usuario.

Answer

No son compatibles con todos los navegadores.

Answer

Son difíciles de implementar.

Answer

Aumentan el tamaño del archivo.

Question 23

¿Qué propiedad CSS se utiliza para determinar la duración de una animación?

Accepted Answer

animation-duration

Answer

animation-delay

Answer

animation-timing-function

Answer

animation-name

Question 24

¿Qué método de API de JavaScript se utiliza para añadir una clase a un elemento de HTML?

Accepted Answer

classList.add

Answer

classList.remove

Answer

classList.toggle

Answer

addClass

Question 25

¿Cuál de los siguientes eventos se activa en JavaScript cuando se completa la carga del DOM?

Accepted Answer

DOMContentLoaded

Answer

load

Answer

DOMNodeInserted

Answer

ready

Question 26

En el contexto de las animaciones web, ¿qué define un fotograma clave?

Accepted Answer

Un punto específico en el tiempo donde se especifica un estado de animación

Answer

El elemento que se va a animar

Answer

La función de interpolación utilizada para la animación

Question 27

En CSS, ¿qué tipo de transición se utiliza para animar gradualmente el cambio de un valor de estilo?

Accepted Answer

Transición CSS

Answer

Transición de JavaScript

Answer

Animación CSS

Answer

Animación de JavaScript

Question 28

En una hoja de estilos CSS, ¿qué selector se utiliza para seleccionar el primer elemento hijo de un elemento padre?

Accepted Answer

>

Answer

^

Answer

~

Answer

+

Question 29

¿Qué propiedad CSS se utiliza para especificar el número de veces que se repetirá una animación?

Accepted Answer

animation-iteration-count

Answer

animation-duration

Answer

animation-fill-mode

Answer

animation-delay

Question 30

En JavaScript, ¿qué método de API de DOM se utiliza para recuperar el valor de un atributo de elemento?

Accepted Answer

getAttribute

Answer

hasAttribute

Answer

setAttribute

Answer

removeAttribute

Question 31

En el contexto del diseño de interfaces de usuario, ¿cuál es el propósito de una animación de transición?

Accepted Answer

Proporcionar retroalimentación visual y mejorar la experiencia del usuario

Answer

Hacer que la página web se cargue más rápido

Answer

Crear efectos visuales impresionantes

Question 32

En CSS, ¿qué propiedad se utiliza para crear una transición suave entre dos estados de un elemento?

Accepted Answer

transition

Answer

transform

Answer

opacity

Answer

animation

Question 33

En CSS, ¿cómo se define la duración de una transición?

Accepted Answer

transition-duration

Answer

transition-property

Answer

transition-timing-function

Answer

transition-delay

Question 34

Para aplicar una animación CSS a un elemento, se utiliza la propiedad:

Accepted Answer

animation

Answer

transform

Answer

transition

Answer

keyframes

Question 35

En CSS, ¿qué propiedad se usa para especificar una secuencia de pasos en una animación?

Accepted Answer

@keyframes

Answer

transition

Answer

animation

Answer

transform

Question 36

Un elemento con la propiedad 'transform: rotate(45deg)' se:

Accepted Answer

Rota 45 grados.

Answer

Se opacifica un 45%.

Answer

Se desplaza 45 píxeles.

Answer

Cambia su tamaño a 45 unidades.

Question 37

¿Cuál de las siguientes funciones de JavaScript se puede usar para animar un elemento con efectos suaves?

Accepted Answer

requestAnimationFrame

Answer

addEventListener

Answer

setTimeout

Answer

setInterval

Question 38

En una animación JavaScript, ¿qué método se utiliza para indicar el punto de inicio de la animación?

Accepted Answer

currentTime

Answer

play()

Answer

stop()

Answer

pause()

Question 39

¿Cuál es la principal ventaja de utilizar una biblioteca de animaciones JavaScript como GreenSock Animation Platform (GSAP)?

Accepted Answer

Proporciona funciones de animación más avanzadas y fáciles de usar.

Answer

Ofrece una mayor compatibilidad con navegadores antiguos.

Answer

Es más fácil de aprender que CSS Animations.

Answer

Requiere menos código que JavaScript puro.

Question 40

Para crear un efecto de parallax scrolling en una página web, ¿qué técnica se suele emplear?

Accepted Answer

Combinar CSS Transforms con eventos de desplazamiento.

Answer

Utilizar técnicas de fondo de video para crear la sensación de movimiento.

Answer

Utilizar JavaScript para manipular el DOM en tiempo real.

Answer

Implementar animaciones complejas con libraries como GSAP.

Question 41

Al diseñar animaciones para una página web, ¿qué aspecto es fundamental para garantizar una buena experiencia de usuario?

Accepted Answer

La fluidez y legibilidad de las animaciones.

Answer

La duración de las animaciones.

Answer

La complejidad de los efectos visuales.

Answer

El uso de animaciones para todos los elementos.

Question 42

¿Qué propiedad CSS se utiliza para especificar la duración de una animación?

Accepted Answer

animation-duration

Answer

animation-name

Answer

animation-iteration-count

Answer

animation-delay

Question 43

¿Qué función de JavaScript se utiliza para obtener el elemento DOM actualmente animado?

Accepted Answer

getAnimations()

Answer

animateElement()

Answer

getAnimatedElement()

Answer

getElementAnimations()

Question 44

¿Cuál de los siguientes es un tipo de transición de CSS?

Accepted Answer

ease-in

Answer

rotate

Answer

fade-in

Question 45

¿Qué propiedad CSS se utiliza para especificar el número de veces que se repetirá una animación?

Accepted Answer

animation-iteration-count

Answer

animation-duration

Answer

animation-repeat

Answer

animation-loop

Question 46

¿Cuál de las siguientes es una ventaja de utilizar animaciones y transiciones?

Accepted Answer

Mejorar la experiencia del usuario

Answer

Reducir el ancho de banda

Answer

Disminuir la velocidad de carga

Answer

Aumentar la complejidad del código

Question 47

¿Qué evento de JavaScript se activa cuando una animación termina?

Accepted Answer

animationend

Answer

animationstart

Answer

animationcancel

Answer

animationiteration

Question 48

¿Cuál de las siguientes es una librería de JavaScript para crear animaciones?

Accepted Answer

GreenSock

Answer

BootStrap

Answer

Moment.js

Answer

JQuery

Question 49

¿Qué propiedad CSS se utiliza para especificar la dirección de una transición?

Accepted Answer

transition-timing-function

Answer

transition-delay

Answer

transition-duration

Answer

transition-property

Question 50

¿Qué herramienta se puede utilizar para crear animaciones personalizadas?

Accepted Answer

Animaciones de Chrome DevTools

Answer

Bloc de notas

Answer

Editor de texto

Answer

Consola de JavaScript