Autor Tema: CSS y HTML Animación con puntos clave ir cambiando color @keyframes CU01064D (Leído 1797 veces)

paramonso · « **en:** 23 de Junio 2017, 19:23 »

Respuestas al ejercicio CU01064D del tutorial básico de programación web con CSS para principiantes.

a) El nombre de la animación es anime.
Y define cuatro puntos clave 0%, 25%, 50%, 100% que es donde
se hacen los cambios en las propiedades .

b) De 0% a 25 el color es #F00, el tamaño de la fuente se mantiene en 10px y top en 10px.
De 25% a 50% cambia el color a #A52A2A, tamaño de la fuente a 90px y left 100px
De 50% a 100% top cambia a 56 px, color a #000 y tamaño de la fuente a 90px;
En 100% se cambia el color a #A52A2A fontsize a 90px y left a 0.
Al mantenerse el tamaño de la fuente a 90px en tres puntos esta va creciendo.

c) Sí es lo mismo usar 0% que from y 100% que to

pedro,, · « **Respuesta #1 en:** 25 de Junio 2017, 01:21 »

Buenas.

Respuestas correctas.

Dejo el ejemplo de como se vería:

Código: [Seleccionar]

<html>
  <head>
    <style>      
      div{
        border: solid 2px;
        width: 400px;
        position: absolute;
        top: 0;
        left:0;
        animation: anime 5s infinite;
      }
      @keyframes anime{
        from{ 
          color: #f00;
          font-size: 10px;
          top: 10px;
        }
        25%{
          color: #A52A2A;
          font-size: 90px;
          left: 100px;}
        50%{ 
          top: 56px; 
          color: #000;
          font-size: 90px;
        }
        to{
          color: #A52A2A;
          font-size: 90px;
          left: 0;
        }
      }
    </style>
  </head>
  <body>
    
    <div>Esto es apr</div>

  </body>
</html>

Saludos.

Foros aprenderaprogramar.com
Didáctica y divulgación de la programación

Noticias: