Buenas noches amigos aquí os dejo mi propuesta al ejercicio. Como siempre no tengo palabras para todo lo que me estáis ayudando, gracias por vuestro tiempo.
Saludos.
EJERCICIO
Busca en internet (página web o blog) una animación CSS y ejecútala en tu navegador. Escribe por separado el código HTML y el código CSS. Describe paso a paso qué es lo que indica cada fragmento de código CSS. ¿Es necesario usar prefijos de navegador para lograr su ejecución en otros navegadores?
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<title>Animation css</title>
<meta name="description" content="portal web aprenderaprogramar.com">
<meta name="keywords" content="animaciones con css">
<link rel="stylesheet" type="text/css" href="estilos34.css">
</head>
<body>
<center>
<h1>
Mi segunda animación en CSS3
</h1>
<center>
<div>CSS3</div>
</body>
</html>
Y ahora el css...
/*Ejercicio CU01065D del curso css Animation css. Animation - name, delay, fill-mode, iteration-count, timing-function, play-state */
div {
width: 80px;
height: 80px;
background-color: #5aaafc;
border: 3px solid #1c89f9;
animation-name: MiAnimacion;/*Con la propiedad animation-name le damos el nombre a a la animación MiAnimacion, en este caso*/
animation-duration: 6s;/*Con la propiedad animation-duration le indicamos el tiempo en segundos, en este caso es de 6s*/
animation-iteration-count: infinite;/*con la propiedad animation-iteration-count indicamos el número de veces que debe repetirse la animación infinite, en este caso, osea que no parara*/
animation-direction: alternate;/*con la propiedad animation-direction indicamos como debe ejecutarse una animación, alternate en este caso, una vez de derecha a izquierda y luego de izquierda a derecha*/
}
@keyframes MiAnimacion {
from {font-size:0%;/*Con la propiedad from se inicia la animación con tamaño de texto 0%, font-size: 0%*/
margin-left:100%;}/*y salieldo desde el margen derecho, con la propiedad margin-left: 100%*/
50% {font-size:400%;}/*En el punto clave de 50% el tamaño del texto aumentará a 400%, con la propiedad font-size. 400%*/
to {font-size:400%; /*Con la propiedad to finalizamos la animación con el texto aún en 400% y a 20% del margen derecho con la propiedad margin-left: 20% y con un ancho del 100% con la propiedad width: 100%*/
margin-left:20%;
width:100%;
}
}
/* El ejemplo consiste en poner un rectángulo en movimiento, que entra desde la derecha del navegador con un texto el cuál aumenta de tamaño. Habrá una repetición donde se hace el efecto inverso y se devuelve infinitamente [loop].*/
/*funciona en todos los navegadores, es decir no necesitan prefijos*/
Tema: HTML y CSS animaciones web Animation name, duration, delay, fill-mode CU01065D (Leído 2555 veces)
RSS -
WAP2