Animation CSS. name, duration, delay, fill-mode, iteration-count, direction, timing-function,play-state (CU01065D)Encontré este código y me gusto, así que lo pondré aquí:
Código HTML<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Animación CSS3</title>
<link rel="stylesheet" type="text/css" href="Ejercicio_Animacion_css.css">
</head>
<body>
<div>Una caja div cualquiera. Con una animación.<br><b>Poner mouse encima.</b></div>
</body>
</html>Código CSS@-webkit-keyframes desplazar{
from{-webkit-transform: none; border-radius: 0;}
to{background-color: #900; color: #EEE;
-webkit-transform: rotateZ(3deg); /*Chrome, Safari, Opera, Ios, Android -webkit */
-moz-transform: rotateZ(3deg); /*Firefox -moz */ /*Opera -o- */
-ms-transform: rotateZ(3deg); /*IExplorer -ms- */
transform: rotateZ(3deg);
border-radius: 10px;
margin-left: 20%;}
}
div{width: 400px; height: 40px;
padding: 10px; margin: 20px;
border: 1px solid #000;
background-color: #CCC; color: #333;
cursor: default;}
div:hover{-webkit-animation: desplazar 2s 2 alternate linear forwards;
-moz-animation: desplazar 2s 2 alternate linear forwards;
animation: desplazar 2s 2 alternate linear forwards;}
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?
El uso de prefijos depende del navegador y su versión y de la propiedad en cuestión. Ejemplo: transform, hay algunas versiones en chrome y safari que no pueden ejecutarlas.
@-webkit-keyframes desplazar{
from{-webkit-transform: none; border-radius: 0;}
to{background-color: #900; color: #EEE;
-webkit-transform: rotate(3deg);
-moz-transform: rotate(3deg);
-ms-transform: rotate(3deg);
transform: rotate(3deg);
border-radius: 10px;
margin-left: 20%;}}; Se crea una animación llamada "desplazar", inicia sin transformación ni radio en el borde. Y pasa a ser rojo oscuro, con color de fuente casi blanca, se inclina a la derecha unos 3 grados (Se usan prefijos para mejorar la compatibilidad con los navegadores), las esquinas se redondean unos 10px en X(horizontal) y Y(vertical) y se desplaza a la izquierda un 20% el tamaño de la pantalla.
div{width: 400px; height: 40px;
padding: 10px; margin: 20px;
border: 1px solid #000;
background-color: #CCC; color: #333;
cursor: default;}; Este seria el aspecto por defecto que tendría el contenedor(div), tendría un ancho de 400px, altura de 40px, tendría 10px de relleno en todas direcciones y un margen de 20px en todas direcciones, un borde solido de 1px de grosor color negro, un fondo gris, un color de fuente gris oscuro y al pasar el mouse en el se mostraría el cursor normal.
div:hover{-webkit-animation: desplazar 2s 2 alternate linear forwards;
-moz-animation: desplazar 2s 2 alternate linear forwards;
animation: desplazar 2s 2 alternate linear forwards;}; al pasar el mouse encima de un contenedor(div) se activaría en el una animación "desplazar", duraría 2 segundos, al completarse se repetiría pero al revés, su velocidad sería constante y al terminar el contenedor quedaría como cuando empezó(Se usan prefijos para mejorar la compatibilidad con los navegadores).
EXTRAEste curso fue muy bueno y gracias a el pude aprender a programar un diseño en la web. Felicitaciones a los creadores del curso. También te doy agradecimento
pedro por revisar las actividades que he estado enviando.
De aquí investigare un poco mas sobre CSS para ver que otras funciones tiene y empezare el curso de JavaScript desde 0, haci que volvere dentro muy poco (en serio, no tardare nada :v). Gracias a todos.
Tema: CSS y HTML.Animación, duration, delay, direction. Ejercicio CU01065D Final curso (Leído 2234 veces)
RSS -
WAP2