You are here
Propiedades de animaciones con CSS3 Sin categoría 

Propiedades de animaciones con CSS3

Propiedades de animaciones con CSS3

Además de las propiedades que hemos citado en el párrafo anterior, tenemos otra serie de atributos que se pueden aplicar a la animación y que se colocan en el DIV.

Esta sería una lista de las propiedades adicionales, aplicables para definir las animaciones que especificamos en el DIV:

  • animation-timing-function: se aplica entre los fotogramas clave, no sobre toda la animación y describe como progresa la animación a lo largo de un ciclo.
  • animation-direction: esta propiedad define el sentido de la animación. Si especificamos “alternate” y los ciclos de iteraccion son impares, la animación irá en la dirección normal, si no, se realizará en la dirección inversa
  • animation-delay: propiedad que nos indica el momento en el que comenzará la animación. Si el valor es 0 se ejecuta en cuanta se carga la página.
  • animation: esta propiedad combina las anteriores de una forma resumida.

Código completo para una animación CSS

A continuación veremos un código CSS donde estamos definiendo una animación, aunque todavía hay algunas cosas que tenemos que contaros antes de hacer nuestra primera página de prueba. Pero de momento aquí tenéis un ejemplo utilizando el fotograma clave y las propiedades de una animación:

DIV {
animation-name: ‘movimiento-diagonal’;
animation-duration: 5s;
animation-iteration-count: 10;
}

@keyframes ‘movimiento-diagonal’ {
from {
left: 0;
top: 0;
}

to {
left: 100px;
top: 100px;
}
}

Este ejemplo lo que nos mostraría seria una animación en la que se mueve un elemento de la esquina inferior izquierda a la esquina superior derecha, ese movimiento va a tardar 5 segundos y se va a repetir 10 veces.

Animación de un texto con CSS 3

Realizamos un ejemplo básico de animación CSS 3 sobre una capa con un simple texto. Veremos cómo hacer funcionar este primer ejemplo de animación CSS en navegadores basados en Webkit.

En este artículo vamos a realizar nuestro primer ejemplo de animación CSS. Veremos que todo es bastante sencillo y que con unas pocas líneas de código CSS se pueden hacer cosas bastante interesantes. Por lo menos, para los que hayan estudiado un poco sobre la animación realizada con otras tecnologías como Javascript, quedará claro que las animaciones CSS son mucho más fáciles y rápidas de producir.

Lo primero que tenemos que hacer es crearnos nuestros fotogramas clave, para ello utilizamos el siguiente código en nuestra hoja de estilos.

@-webkit-keyframes movimiento-diagonal {
from {
left: 0px;
}

to {
left: 100px;
}
}

Como ya se comentó anteriormente, lo que se ha definido en el código anterior es un par de fotogramas clave, que corresponden con el inicio y el fin de la animación. En la práctica ésto hace que se nos mueva nuestro texto, de izquierda a derecha de 0px a 100 px.

Una vez que tenemos este primer paso, vamos a darle las propiedades necesarias a la capa DIV, para terminar de definir nuestra animación:

#anim {
-webkit-animation-name: movimiento-diagonal;
-webkit-animation-duration: 3s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: alternate;/*para que vuelva a su posicion inicial */
width: 100px;
background-color: Teal;
color: #fff;
position: relative;
padding: 2px;
}

En la primera linea le damos el nombre a la animación, que tiene que ser el mismo que el del fotograma clave.

En la segunda le damos una duración de 3 segundos, es decir, la animación tardará en hacer el recorrido sólo 3 segundos.

En la tercera le decimos que lo repita infinitas veces.

La propiedad -webkit-animation-direction: alternate hace que el texto, una vez que haga el recorrido, vuelva a su posición inicial realizando el camino inverso.

Y por último le damos un ancho, y color de fondo y de texto, así como una posición relativa, ya que de lo contrario no funcionaria nuestra animación.

Con esto nuestro código CSS estaría completo, ahora sólo nos quedaría el código HTML que sería tan simple como esto:

<html>
<head>
<title>Animacion CSS 3</title>
<link rel=”stylesheet” href=”animacion-css.css” type=”text/css”>
</head>
<body>

<div id=”anim”>Esto es una animación</div>

</body>
</html>

Código completo de este ejemplo a continuación:

animacion-css.css

@-webkit-keyframes movimiento-diagonal {
from {
left: 0px;
}

to {
left: 100px;
}
}

#anim {
-webkit-animation-name: movimiento-diagonal;
-webkit-animation-duration: 3s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: alternate;/*para que vuelva a su posicion inicial */
width: 100px;
background-color: Teal;
color: #fff;
position: relative;
padding: 2px;
}

animacion-css.html

<html>
<head>
<title>Animacion CSS 3</title>
<link rel=”stylesheet” href=”animacion-css.css” type=”text/css”>
</head>
<body>

<div id=”anim”>Esto es una animación</div>

</body>
</html>


Si quieres seguir aprendiendo con nosotros, puedes ingresar a nuestros

Cursos y Diplomados de Tecnología Web visita www.uneweb.edu.ve  para más información

Related posts