CSS y HTML. Animación en CSS puntos clave. @keyframes. Ejercicio CU01064D

[Chompy129]

Animación CSS. Diferencia entre transición y animación. @keyframes: fotogramas o estados clave. (CU01064D)

Aquí esta el código en CSS (como siempre) que dio el curso básico de programador web desde cero:

Código: [Seleccionar]

@keyframes anime{
    0%{ color: #f00;   font-size: 10px;  top: 10px;}
    25%{color: #A52A2A; font-size: 90px; left: 100px;}
    50%{;  color: #000; font-size: 90px; top: -56px}
    100%{color: #A52A2A; font-size: 90px; left: 0; }
}

a) ¿Cuál es el nombre de la animación? ¿Cuántos puntos clave define?

  R= La animación se llama "anime"(que mejor?), define unos 4 puntos clave.


b) ¿Qué ocurrirá (cuál será el cambio de propiedades) durante la animación?

   R= El texto al principio será de color rojo luego cambiara a rojo oscuro, luego a blanco y volverá otra vez a rojo oscuro. El tamaño de la fuente sera de 10px luego cambiara y se mantendrá en 90px hasta el final de la animación. En cuanto a su posición, empezara 10px alejado de la parte superior, luego se moverá a la derecha unos 100px, bajara a unos 56px alejado de la parte superior y volverá a estar a 0px alejado del lateral izquierdo.


c) ¿Es equivalente usar 0% en lugar de from? ¿Y 100% en lugar de to?

   R= Si, es equivalente tanto para from y to. Pero no se si se interpretara de forma correcta el código (debería hacerlo).

[pedro,,]

Buenas Chompy129.

A) Bien.

B) Bien. Lo único que confundiste el blanco por el negro en los estados que atraviesa la animación.

C)Todo bien.

Saludos.