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 24 de Junio 2017, 12:25
-
Hola. Hago la entrega del ejercicio CU1065D del curso práctico de programación web con CSS
Código HTML
<!--
animacion.html
Copyright 2017 PabloRamon <pabloramon@ramon-Compaq-Presario-CQ61-Notebook-PC>
-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>aprenderaprogramar.com CSS ejercicio 65 CU1065D</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<meta name="generator" content="Geany 1.27" />
<link rel="stylesheet" type="text/css" href="animacion.css">
</head>
<body>
<div class="cubo" >
<div class="rebote" align="center">REBOTE</div>
</div>
</body>
</html>
Código CSS
.cubo div{
height:100px;
width:150px;
margin: auto;
float:left;
margin:10px;
padding:auto;
}
.rebote:hover {
animation-name:anime; /*nombre de la animacion definida en @keyframes*/
animation-duration: .5s; /*Duracion de la animacion 5s*/
animation-iteration-count:5; /*Numero de veces que se repite la animacion*/
animation-delay:5ms; /* retraso en segundos s o ms milisegundos*/
animation-direction:normal; /* normal = se ejecuta hacia delante*/
animation-play-state:running; /*por defecto running */
animation-fill-mode: none;/*por defecto none = comienza y acaba en el estado inicial*/
}
@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; }
}
-
Buenas.
Te faltaría comentar esta parte del código css:
@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; }
}
Y también te faltaría responder a la pregunta...
¿Es necesario usar prefijos de navegador para lograr su ejecución en otros navegadores?
Saludos. ;D
-
Hola.
Lo tenia comentado pero por un despiste no lo corregí antes de publicar.
La respuesta a :
¿Es necesario usar prefijos de navegador para lograr su ejecución en otros navegadores? No. Pero se debería de poner por los navegadores de versiones mas antiguas.
Envío el despiste.
Perdón y gracias.
@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; }
/* 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) Si es lo mismo usar 0% que from y 100% que to
* /