Lab : animation-delay.html

<!doctype html>
<html>
    <head>
        
        <style type="text/css">
            /* Retraso de 3 segundos para empezar la animación */
            .Retraso {
                animation-delay:3s;
            }

/* Animación */
            .ObjetoAnimado {
                float:left;
                margin-right:20px;
                width:50px;
                height:50px;
                animation-name:MiAnimacion;
                animation-duration:20s; /* Si no especificamos la duración, por defecto es 0 */
            }
            /* Animación para todos (cuando sea oficial, de momento no funciona en ningún navegador) */    
            @keyframes MiAnimacion {
                0%   { background-color:#EEE; }          /* Al principio de la animación */
                100% { background-color:#00A; }          /* Al final de la animación */
            }            
		</style>
    	
		<script type="text/javascript">
		</script>
	</head>
	<body>
    	El primer objeto utiliza la clase <i>ObjetoAnimado</i> y empieza nada mas cargar la web, 
        en cambio el segundo objeto ademas de utilizar la clase <i>ObjetoAnimado</i> tambien utiliza la clase <i>Retraso</i>, 
        lo que hace que empieze 3 segundos más tarde.
        <p><b>NOTA : </b> Este ejemplo no funciona en Internet Explorer 9 e inferiores!</p>
        <div class='ObjetoAnimado'></div>
        <div class='ObjetoAnimado Retraso'></div>
	</body>
</html>

Actualización en 5s
Esc para cancelar
Alt+A para actualizar

Usuario
Password