Autor Tema: CSS y HTML objeto que mueve rebota Animación duration delay direction. CU1065D (Leído 2772 veces)

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

Código: [Seleccionar]

.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; }
   }

pedro,, · « **Respuesta #1 en:** 25 de Junio 2017, 01:30 »

Buenas.

Te faltaría comentar esta parte del código css:

Código: [Seleccionar]

@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...

Citar

¿Es necesario usar prefijos de navegador para lograr su ejecución en otros navegadores?

Saludos.

paramonso · « **Respuesta #2 en:** 25 de Junio 2017, 10:16 »

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.

Código: [Seleccionar]

@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
       
      * /

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

Noticias: