Foros aprenderaprogramar.com

Aprender a programar => C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más => Mensaje iniciado por: paramonso en 23 de Junio 2017, 19:23

Título: CSS y HTML Animación con puntos clave ir cambiando color @keyframes CU01064D
Publicado por: 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

Título: Re:CSS Ejercicio 64 CU01064
Publicado por: pedro,, 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. ;D