HTML CSS crear efecto desplazamiento animacion regla keyframe ejemplo CU01064D

[Boletos]

Hola! amigos de aprenderaprogramar.

Respuesta al ejercicio CU01064D del tutorial básico de programación web CSS desde cero:

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

   El nombre de la animación es anime. Define cuatro puntos
   clave: from, 25%, 50%, y to.


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

   El elemento con la animación denominada "anime" comenzará con color
   rojo (#FF0000), tamaño de la fuente de 10 pixels y "top:10px;" no hace
   nada, (será "margin-top"?).
        En el 25% de la animación el color cambia a marrón (#A52A2A), tamaño
        de la fuente 90 pixels y "left:100px" no hace nada, (será "margin-left"?).
        En el 50% de la animación el color cambia a negro (#000000), tamaño de
        la fuente 90 pixels y "top:56px" no hace nada, (puede ser "margin-top"?).
        La animación acaba con color marrón (#A52A2A), tamaño de la fuente 90
        pixels y "left:0" no hace nada, ("margin-left"?).

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

       Ambas respuestas: Sí.

Un saludo!

[César Krall]

Hola!

En la respuesta b) para comprender el significado de top, left, etc. repasa esta entrega: https://www.aprenderaprogramar.com/index.php?option=com_content&view=article&id=736:propiedad-position-css-static-relative-absolute-fixed-top-right-bottom-left-ejemplos-practicos-cu01032d&catid=75:tutorial-basico-programador-web-css-desde-cero&Itemid=203

Crea un código y aplica los estilos como en https://www.aprenderaprogramar.com/foros/index.php?topic=3798.0 , así podrás comprobar el efecto


Saludos!

[Boletos]

Hola! Cesar.
Efectivamente una vez establecido el valor "position" como "fixed" o "relative" si se aprecia el cambio en la animación.
Error mío al creer que había que evaluar el código css tal cual estaba, sin añadir nada más.
Gracias! Por la ayuda.