Foros aprenderaprogramar.com
Aprender a programar => Aprender a programar desde cero => Mensaje iniciado por: Chompy129 en 27 de Septiembre 2016, 23:59
-
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:
@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).
-
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. ;D