Autor Tema: HTML y CSS crear animaciones cambiar propiedades estilos con keyframes CU01064D (Leído 2221 veces)

Dimitar Stefanov · « **en:** 22 de Enero 2016, 01:32 »

Códigos del ejercicio CU01064D del curso CSS desde cero.

Código HTML:

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"/>
	<link rel="stylesheet" type="text/css" href="estilos102.css"/>
	<title>Portal web</title>
</head>
<body>
	<div id="caja1">Hola</div>
</body>
</html>

Código CSS: "estilos102.css"

Código: [Seleccionar]

#caja1 {
    width: 300px;
    height: 200px;
    animation: anime 5s infinite;
	position: absolute;
	left: 0;
	top: 0;
}
@keyframes anime {
   0%{ background: #f00;   font-size: 10px;  top: 10px;}

    25%{background: #a52a2a; font-size: 90px; left: 100px;}

    50%{ top: 56px;  background: #000; font-size: 90px; }

    100%{background: #a52a2a; font-size: 90px; left: 0; }
}

/* A) La animación se llama anime y tien 4 puntos claves. 
B) Al principio tendra un fondo de color #f00 con un font-size de 10px y estará a 10px del borde de arriba. Llegada la animación a los 25% tendrá un fonde de color #a52a2a con un tamaño de fuente de 90px y estará a 100px del borde izquierdo. A la mitad de la animación estará a 56px de arriba, con un fonde de color #000 y con un tamaño de letra de 90px. Al final tendrá un fondo de color #a52a2a, con un tamaño de letra de 90px y estará pegado al borde de la izquierda.
C) Es lo mismo usar 0% que from y 100% que to.*/

Respuestas a las preguntas del ejercicio:

a) La animación se llama anime y tiene 4 puntos claves.

b) Al principio tendrá un fondo de color #f00 con un font-size de 10px y estará a 10px del borde de arriba. Llegada la animación a los 25% tendrá un fondo de color #a52a2a con un tamaño de fuente de 90px y estará a 100px del borde izquierdo. A la mitad de la animación estará a 56px de arriba, con un fondo de color #000 y con un tamaño de letra de 90px. Al final tendrá un fondo de color #a52a2a, con un tamaño de letra de 90px y estará pegado al borde de la izquierda.

c) Es lo mismo usar 0% que from y 100% que to

Gracias.

Ogramar · « **Respuesta #1 en:** 05 de Febrero 2016, 08:15 »

Buenas dimiste el código está bien aplicado y se ve bien el efecto de la animación. Las preguntas también las veo bien respondidas. No sé por qué has cambiado el código del ejercicio donde se aplicaba color (color de fuente) por background-color (fondo del contenedor). Si se aplica el color de fuente se ve como si fueran letras volando cambiando de color y de tamaño y si se aplica background-color se ve un contenedor que se mueve con letras dentro cambiando de tamaño. El efecto no es el mismo, pero tampoco es nada de gran importancia porque el objetivo del ejercicio era ver cómo funcionaba una animación y entender cómo se definía cosa que creo has logrado.

Salu2

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

Noticias: