Programador Web Inicial
Animación con CSS
Bloques temáticos:
1. Transform.
2. Transition.
3. Animation.
4. Aceleración.
1. Transform:
Las transformaciones de CSS permiten transformar elementos en espacio
bidimensional y tridimensional.
Con las transformaciones CSS podemos cambiar la posición de un elemento dentro de
su elemento primario, manipular la rotación o la escala de un elemento y aplicar
distorsiones de sesgo.
Si se agrega la propiedad perspective (o la función de transformación perspective), se
agrega una tercera dimensión a las transformaciones. La aplicación de
transformaciones a un elemento es sencilla. En primer lugar, agrega la propiedad
transform y luego anexa una lista de funciones de transformación. Por ejemplo, la
siguiente declaración aplica una transformación de traslación:
transform: translateX(400px);
Para que la compatibilidad con los distintos navegadores sea máxima, podemos incluir
los prefijos específicos de cada navegador antes de la propiedad de transformación.
Por ejemplo, las siguientes declaraciones garantizan la compatibilidad con Chrome y
Safari (“webkit-”), Firefox (“-moz-”) y navegadores que no requieren un prefijo, como
Internet Explorer 10.
-webkit-transform: translateX(400px);
-moz-transform: translateX(400px);
La sintaxis de la regla sería la siguiente:
div {
-webkit-transform: translateX(400px); -moz-
transform: translateX(400px);
transform: translateX(400px)
}
Funciones de la propiedad transform:
Función Descripción
matrix(a, b, c, d, e, f) Especifica una transformación 2D en forma de una matriz de
transformación de seis valores
rotate(angle Especifica una rotación 2D en el ángulo especificado en el
parámetro sobre el origen del elemento.
scale(sx,sy) Especifica una operación de escala 2D con el vector de escala
[sx,sy] descrita por los dos parámetros.
scaleX(sx) Especifica una operación de escala con el vector de escala
[sx,1], donde sx se indica como parámetro.
scaleY(sy) Especifica una operación de escala con el vector de escala
[1,sy], donde sy se indica como parámetro.
skew(angleX,angleY) Especifica una operación de sesgo a lo largo del eje x según el
ángulo indicado.
skewX(angle) Especifica una operación de sesgo a lo largo del eje y según el
ángulo indicado.
translate(tx,ty) Especifica una traslación 2D según el vector [tx,ty], donde tx es
el primer parámetro del valor de traslación y ty es el segundo
parámetro del valor de traslación opcional.
translateX(tx) Especifica una traslación de cantidad determinada en la
dirección x.
translateY(ty) Especifica una traslación de cantidad determinada en la
dirección y
Para este ejemplo en las imágenes la declaración de la propiedad y el valor serían:
transform: rotate(45px);
transform: rotate (-35deg);
transform: skewX(25deg);
transform: skewY(25deg);
transform: scale(0.75);
transform: scaleX(0.75);
transform: scaleY(0.75);
transform: scaleY(1.25);
transform: scaleX(1.25);
Propiedades CSS específicas para 3D
Realizar cambios en las propiedades CSS en el espacio es un poco más complejo.
Debemos empezar configurando el espacio 3D dándole una perspectiva, a
continuación debemos configurar como los elementos 2D interactuarán en dicho
espacio.
Definiendo una perspectiva
El primer elemento a definir es la perspectiva.
La perspectiva es lo que nos da la sensación de 3D. Cuanto más lejanos estén los
elementos del espectador, más pequeños serán.
Definímos como de rápido se encogen con la propiedad perspective. Cuánto más
pequeño sea el valor, más profunda será la perspectiva.
Ejemplo:
<!DOCTYPE html>
<html>
<head>
<style>
#div1 {
position: relative;
height: 150px;
width: 150px;
margin: 50px;
padding: 10px;
border: 1px solid
black;
-webkit-perspective: 150px; /* Chrome, Safari, Opera */
perspective: 150px;
}
#div2 { padding:
50px; position:
absolute; border:
1px solid black;
background-color:
red;
-webkit-transform: rotateX(45deg); /* Chrome, Safari, Opera */
transform: rotateX(45deg);
}
</style>
</head>
<body>
<div id="div1">
<div id="div2">Ejemplo</div>
</div>
</body>
</html>
Perspective origin
La propiedad perspective-origin define el lugar donde un elemento 3D se basa
en las direcciones x y el eje y. Esta propiedad le permite cambiar la posición
inferior de elementos 3D.
Ejemplo:
<!DOCTYPE html>
<html>
<head>
<style>
#div1 {
position: relative;
height: 150px;
width: 150px;
margin: 50px;
padding: 10px;
border: 1px solid
black;
-webkit-perspective: 150px; /* Chrome, Safari, Opera */
-webkit-perspective-origin: 10% 10%; /* Chrome, Safari, Opera */
perspective: 150px;
perspective-origin: 10% 10%;
}
#div2 { padding:
50px; position:
absolute; border:
1px solid black;
background-color:
red;
-webkit-transform: rotateX(45deg); /* Chrome, Safari, Opera */
transform: rotateX(45deg);
}
</style>
</head>
<body>
<div id="div1">
<div id="div2">Ejemplo</div>
</div>
</body>
</html>
2. Transition:
Las transiciones CSS se controlan mediante la propiedad abreviada transition.
Es recomendable utilizar este método porque de esta forma se evita que la longitud de
la lista de parámetros sea diferente, lo que puede dar lugar a tener que emplear un
tiempo considerablemente largo en depurar el código CSS.
Podemos controlar los componentes individuales de la transición usando las siguientes
subpropiedades:
transition-property
Especifica el nombre o nombres de las propiedades CSS a las que deberían aplicarse
las transiciones. Sólo las propiedades que se enumeran aquí son animadas durante
las transiciones; los cambios en el resto de las propiedades suceden de manera
instantánea como siempre.
transition-duration
Especifica la duración en la que sucederán las transiciones. Puedes especificar una
única duración que se aplique a todas las propiedades durante la transición o valores
múltiples que permitan a cada propiedad de transición un período de tiempo diferente.
transition-timing-function
Especifica la curva cúbica bézier que se usa para definir cómo se computan los
valores intermedios para las propiedades.
transition-delay
Define el tiempo de espera entre el momento en que se cambia una propiedad y el
inicio de la transición.
Propiedades que pueden ser animadas
Las transiciones y las animaciones CSS pueden usarse para animar las siguientes
propiedades.
background-color <color>
background-image solo degradado
background-position <porcentaje> | <length>
background-size <porcentaje> | <length>
border-color (incluye sub-propiedades) <color>
border-radius (incluye sub-propiedades) <porcentaje> | <length>
border-width (incluye sub-propiedades) <length>
border-spacing <length>
bottom <porcentaje> | <length>
-moz-box-flex número
box-shadow sombra
color <color>
column-count número
column-gap <length>, palabras clave
column-rule-color <color>
column-rule-width <length>, palabras clave
column-width <length>
clip rectágulo
fill pintar
fill-opacity valor de opacidad
flood-color <color> | palabras clave
font-size <porcentaje> | <length>
font-size-adjust números, palabras clave
font-stretch palabras clave
font-weight números| palabras clave (excluyendo bolder, lighter)
height <porcentaje> | <length>
image-region rect()
left <porcentaje> | <length>
letter-spacing <length>
lighting-color <color> | palabras clave
line-height número | <porcentaje> |
<length>
margin (incluye sub-propiedades) <length>
marker-offset <length>
max-height <porcentaje> | <length>
max-width <porcentaje> | <length>
min-height <porcentaje> | <length>
min-width <porcentaje> | <length>
opacity número
outline-color <color>
outline-offset entero
outline-radius (incluye sub-propiedades) <porcentaje> | <length>
outline-width <length>
padding (incluye sub-propiedades) <length>
right <porcentaje> | <length>
stop-color <color> | palabras clave
stop-opacity valor de opacidad
stroke pintar
stroke-dasharray dasharray
stroke-dashoffset <porcentaje> | <length>
stroke-miterlimit miterlimit
stroke-opacity valor de opacidad
stroke-width <porcentaje> | <length>
text-indent <porcentaje> | <length>
text-shadow sombra
top <porcentaje> | <length>
transform-origin <porcentaje> | <length>, keywords
transform transform-function
<porcentaje> | <length>, palabras
vertical-align
clave
visibility visibilidad
width <porcentaje> | <length>
word-spacing <porcentaje> | <length>
z-index entero
Funciones de intervalos de transición
Las funciones de intervalos
determinan el cálculo de los
valores intermedios de la
transición. La función de intervalo
puede especificarse
proporcionando el gráfico de la
función correspondiente, como lo
definen los cuatro puntos que
definen una cúbica Bézier
En lugar de especificar directamente una bézier, existen valores de intervalos
predeterminados:
• ease, equivalente a cubic-bezier(0.25, 0.1, 0.25, 1.0)
• linear, equivalente a cubic-bezier(0.0, 0.0, 1.0, 1.0)
• ease-in, equivalente a cubic-bezier(0.42, 0, 1.0, 1.0)
• ease-out, equivalente a cubic-bezier(0, 0, 0.58, 1.0)
• ease-in-out, equivalente a cubic-bezier(0.42, 0, 0.58, 1.0) Ejemplo:
Este sencillo ejemplo proporciona demostraciones de distintos efectos de transición sin
excesivos adornos.
En primer lugar, el HTML para crear los elementos sobre los que probaremos nuestras
transiciones:
<ul>
<li id="long1">Transición larga, gradual...</li>
<li id="fast1">Transición muy rápida...</li>
<li id="delay1">Transición larga de un minuto de retraso...</li>
<li id="easeout">Usar intervalos de alejamiento...</li>
<li id="linear">Usar intervalos lineales...</li>
<li id="cubic1">Usar cúbica bézier(0.2, 0.4, 0.7, 0.8)...</li>
</ul>
Cada elemento tiene su propia id.; la CSS se encarga del resto. Veamos un par de
ejemplos.
Usar un retraso
Este ejemplo realiza una transición de tamaño de fuente de cuatro segundos con dos
segundos de retraso entre el momento en que el usuario pasa el ratón por encima del
elemento y el comienzo del efecto de animación:
#delay1
{ position:
relative;
transition-property: font-size;
transition-duration: 4s; transition-
delay: 2s;
font-size: 14px;
}
#delay1:hover {
transition-property: font-
size; transition-duration:
4s; transition-delay: 2s;
font-size: 36px;
}
Usar una función de intervalos de transición lineales
De manera predeterminada, la función de intervalos que se usa para computar los
pasos intermedios durante la secuencia de animación proporciona una curva suave de
aceleración y desaceleración para el efecto de animación.
Si queremos que el efecto mantenga una velocidad constante a lo largo de la
animación, podemos especificar que deseas usar la función de intervalos de transición
linear, tal y como se muestra a continuación.
transition-timing-function: linear;
Especificar una función de intervalos cúbicos bézier
Puedes controlar aún más el intervalo de la secuencia de animación si especificas tu
propia curva cúbica bézier que describe la velocidad de animación. Por ejemplo:
transition-timing-function: cubic-bezier(0.2, 0.4, 0.7, 0.8);
Establece una función de intervalo con una curva bézier definida por los puntos (0.0,
0.0), (0.2, 0.4), (0.7, 0.8) y (1.0, 1.0).
Menús de resaltado
Un uso común de CSS es resaltar elementos de un menú mientras el usuario desplaza
el cursor del ratón por encima de ellos. Es fácil usar las transiciones para hacer que el
efecto sea aún más atractivo.
Primero configuramos el menú usando HTML:
<div class="sidebar">
<p><a class="menuButton" href="home">Inicio</a></p>
<p><a class="menuButton" href="about">Acerca de</a></p>
<p><a class="menuButton" href="contact">Contacto Us</a></p>
<p><a class="menuButton" href="links">Vínculos</a></p>
</div>
Después construimos la CSS para implementar el aspecto de nuestro menú. Las
porciones relevantes se muestran a continuación:
.menuButton {
position: relative;
transition-property: background-color, color; transition-
duration: 1s;
transition-timing-function: ease-out;
-webkit-transition-property: background-color, color;
-webkit-transition-duration: 1s;
-o-transition-property: background-color, color;
-o-transition-duration: 1s;
text-align: left;
background-color:
grey; left: 5px; top:
5px; height: 26px;
color: white;
border-color: black;
font-family: sans-
serif; font-size:
20px; text-
decoration: none;
-moz-box-shadow: 2px 2px 1px black;
padding: 2px 4px;
border: solid 1px black;
}
.menuButton:hover
{ position: relative;
transition-property: background-color, color; transition-
duration: 1s; transition-timing-function: ease-out;
-webkit-transition-property: background-color, color;
-webkit-transition-duration: 1s;
-o-transition-property: background-color, color;
-o-transition-duration: 1s; background-
color:white;
color:black;
-moz-box-shadow: 2px 2px 1px black;
}
Este código CSS establece el aspecto
del menú con los colores de fondo y del
texto que cambian cuando el elemento
está en su estado :hover
3. Animation:
Las animaciones CSS3 permiten animar la transición entre un estilo CSS y otro. Las
animaciones constan de dos componentes:
• un estilo que describe la animación
• un conjunto de fotogramas que indican su estado inicial y final, así como
posibles puntos intermedios en la misma.
Las animaciones CSS tienen tres ventajas principales sobre las técnicas tradicionales
de animación basada en scripts:
o Es muy fácil crear animaciones sencillas, podemos hacerlo incluso sin tener
conocimientos de Javascript.
o La animación se muestra correctamente, incluso en equipos poco potentes.
Animaciones simples realizadas en Javascript pueden verse mal (a menos que
estén muy bien programadas). El motor de renderizado puede usar técnicas de
optimización como el "frame-skipping" u otras para conseguir que la animación
se vea tan suave como sea posible.
o Al ser el navegador quien controle la secuencia de la animación, permitimos que
optimice el rendimiento y eficiencia de la misma, por ejemplo, reduciendo la
frecuencia de actualización de la animación ejecutándola en pestañas que no
estén visibles.
Configurando la animacion
Para crear una secuencia de animación CSS usaremos la propiedad animation y sus
sub-propiedades.
Con ellas podemos no solo configurar el ritmo y la duración de la animación sino otros
detalles sobre la secuencia de la animación. Con ellas no configuramos la apariencia
actual de la animación, para ello disponemos de @keyframes.
Las subpropiedades de animation son:
animation-delay
Tiempo de retardo entre el momento en que el elemento se carga y el comienzo de la
secuencia de la animación.
animation-direction
Indica si la animación debe retroceder hasta el fotograma de inicio al finalizar la
secuencia o si debe comenzar desde el principio al llegar al final.
animation-duration
Indica la cantidad de tiempo que la animación consume en completar su ciclo
(duración). animation-iteration-count
El número de veces que se repite. Podemos indicar infinite para repetir la animación
indefinidamente. animation-name
Especifica el nombre de la regla @keyframes que describe los fotogramas de la
animación.
animation-play-state
Permite pausar y reanudar la secuencia de la animación animation-timing-
function
Indica el ritmo de la animación, es decir, como se muestran los fotogramas de la
animación, estableciendo curvas de aceleración.
animation-fill-mode
Especifica qué valores tendrán las propiedades después de finalizar la animación (los
de antes de ejecutarla, los del último fotograma de la animación o ambos).
Definiendo la secuencia de la animación con fotogramas
Una vez configurado el tiempo de la animación, necesitamos definir su apariencia.
Esto lo haremos estableciendo dos fotogramas más usando la regla @keyframes.
Cada fotograma describe cómo se muestra cada elemento animado en un momento
dado durante la secuencia de la animación.
Desde que se define el tiempo y el ritmo de la animación, el fotograma usa porcentaje
para indicar en qué momento de la secuencia de la animación tiene lugar. 0% es el
principio, 100% es el estado final de la animación.
Debemos especificar estos dos momentos para que el navegador sepa dónde debe
comenzar y finalizar; debido a su importancias, estos dos momentos tienen alias
especiales: from y to.
Además podemos, opcionalmente, incluir fotogramas que describan pasos intermedios
entre el punto inicial y final de la animación.
Ejemplo:
@keyframes fadeOut
{ from { opacity: 1; }
to { opacity: 0; }
}
.DivFadeOut:hover { animation-
duration: 2s;
animation-name: fadeOut;
}
Otro ejemplo:
div {
-webkit-animation: myfirst 5s; /* regla para la animación */
animation: myfirst 5s;
}
@-webkit-keyframes myfirst { /* regla @keyframe */
from {background: red;}
to {background: yellow;}
}
@keyframes myfirst { /* sintaxis estándar */
from {background: red;
}
to {background: yellow;}
4. Aceleración:
La propiedad CSS animation-timing-function especifica cómo una animación CSS debe
avanzar sobre la duración de cada ciclo.
Para animaciones con keyframes, la timing function se aplica entre los keyframes en
lugar de sobre toda la animación. Es decir, se aplica al comienzo del keyframe y al
final del mismo.
Una timing function definida dentro de un keyframe afecta a ese keyframe. Si no está
definida para el keyframe, se aplica la timing function para la animación en general.
Sintaxis
/* Keyword values */ animation-timing-
function: ease; animation-timing-function:
ease-in; animation-timing-function: ease-
out; animation-timing-function: ease-in-out;
animation-timing-function: linear;
animation-timing-function: step-start;
animation-timing-function: step-end;
/* Function values */
animation-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1); animation-timing-
function: steps(4, end);
/* Multiple animations */
animation-timing-function: ease, step-start, cubic-bezier(0.1, 0.7, 1.0, 0.1);
/* Global values */
animation-timing-function: inherited; animation-timing-
function: initial; animation-timing-function: unset;
Ejemplo:
<!doctype html>
<html>
<head>
<style type="text/css">
.Linear {
-webkit-animation-timing-function:linear;
animation-timing-function:linear;
}
.Ease {
-webkit-animation-timing-function:ease;
animation-timing-function:ease;
}
.EaseIn {
-webkit-animation-timing-function:ease-in;
animation-timing-function:ease-in;
}
.EaseOut {
-webkit-animation-timing-function:ease-out;
animation-timing-function:ease-out;
}
.EaseInOut {
-webkit-animation-timing-function:ease-in-out; animation-
timing-function:ease-in-out;
}
.CubicBezier {
-webkit-animation-timing-function:cubic-bezier(.17,-0.42,0,1.35);
animation-timing-function:cubic-bezier(.17,-0.42,0,1.35);
}
/* Animación */
.ObjetoAnimado {
animation-name:MiAnimacion;
animation-duration:5s;
/* Si no especificamos la duración, por defecto es 0 */ animation-
iteration-count:infinite;
/* Iteraciones infinitas para que no pare la animación */
animation-direction:alternate;
/* Safari, Opera y Chrome */
-webkit-animation-name:MiAnimacion;
-webkit-animation-duration:5s;
-webkit-animation-iteration-count:infinite;
-webkit-animation-direction:alternate;
float:left;
background-color:#F90;
margin-right:10px;
padding:2px 10px 20px;
}
/* Animación para Chrome, Opera y Safari */
@-webkit-keyframes MiAnimacion {
0% { height:200px; margin-top:0px } /* Al principio de la animación
*/
100% { height:0px; margin-top:200px } /* Al final de la animación */
}
/* Animación para todos */
@keyframes MiAnimacion {
0% { height:200px; margin-top:0px } /* Al principio de la animación
*/ 100% { height:0px; margin-top:200px } /* Al final de la animación
*/
}
</style>
</head>
<body>
<div class="ObjetoAnimado Linear">Linear</div>
<div class="ObjetoAnimado Ease">Ease</div>
<div class="ObjetoAnimado EaseIn">EaseIn</div>
<div class="ObjetoAnimado EaseOut">EaseOut</div>
<div class="ObjetoAnimado EaseInOut">EaseInOut</div>
<div class="ObjetoAnimado CubicBezier">CubicBezier
(.17,-0.42,0,1.35)</div> </body>
</html>
Bibliografía utilizada y sugerida
Eguíluz, Javier. Introducción a CSS. 1ª Ed. Creative Commons; 2006.
Stark, J. Building Android apps with HTML, CSS, and JavaScript. Sebastopo. CA:
O'Reilly. 2010
Sitios web
https://developer.mozilla.org
https://www.w3schools.com/css/css3_intro.asp
