Muy buenas tardes!
Adjunto mi ejercicio CU01065D del tutorial de programador web con CSS y aguardo sus correcciones o comentarios. Muchas gracias!
HTML:
<!DOCTYPE html>
<html>
<head>
<style>
#contenedor {width:100%;height:80px;background-color:blue;border-radius:15px; margin:auto;}
#Primero{width:10%; height:5%;background-color:yellow; margin:5px; border-radius:10px; position:absolute;}
/* Empezamos definiendo las propiedades que va a tener el elemento en cada uno de los estados de la animación mediante el uso de la regla @keyframes.*/
@keyframes Animacion {
from {background-color:yellow;}
/*Al elemento que se le aplique la animacion tendra un fondo de color amarillo*/
25% {margin-left:24%;}
/*Al 25% de comenzada la animacion el elemento tendra un margen izquierdo de 24%.*/
50% {margin-left:49%;}
/*Al 50% de comenzada la animacion el elemento tendra un margen izquierdo de 49%.*/
75% {margin-left:74%;}
/*Al 75% de comenzada la animacion el elemento tendra un margen izquierdo de 74%.*/
100% {margin-left:87.5%;}
/*Al 100% de comenzada la animacion el elemento tendra un margen izquierdo de 87.5%.*/
to {background-color:aqua;}
/*Al finalizar la animacion el elemento tendra el color definido en esta propiedad. La transformacion del mismo comienza en el primer paso de la animacion partiendo del color definido en "from".*/
}
.uno{animation-name:Animacion; /*Mediante esta propiedad indicamos el nombre de animación definida en una regla @keyframes*/
animation-duration:2s; /* indicamos el tiempo en segundos (2) que llevará completar un ciclo de la animación. */
animation-iteration-count:infinite; /*Numero de veces que se repite el ciclo de la animacion.*/
animation-direction:normal; /*la animación se ejecutará hacia delante.*/
animation-delay:1s; /*Indica el tiempo en segundos (s) que debe retrasarse el inicio de la animación.*/
}
</style>
</head>
<body>
<p><b>Animation CSS:</b>
Name, duration, delay, fill-mode, iteration-count, direction, timing-function,play-state (CU01065D)</p>
<div id="contenedor">
<div class="uno" id="Primero"> </div>
</div>
</body>
</html>
Tema: HTML y Animation CSS crear efectos dinámicos y movimiento en página web CU01065D (Leído 2041 veces)
RSS -
WAP2