Contexto
Ahora has llegado a una de las partes más interesantes del curso, que es la de empezar a darle movimiento a los objetos mediante transiciones, animaciones y transformaciones. Estas funcionalidades pueden servir para atrapar la atención del usuario, para explicar puntos de manera impactante en la aplicación o como una solución para crear o enriquecer una interfaz de usuario.
Explicación
8.1 Transiciones
El navegador normalmente aplica cambios en las propiedades de CSS a un elemento de forma inmediata. Si usa el selector de desplazamiento, por ejemplo, el navegador aplica las propiedades que asocia con el selector tan pronto como el usuario mueve el mouse sobre el elemento.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style>
p {
padding: 5px;
border: medium double black;
background-color: lightgray;
font-family: sans-serif;
}
#banana {
font-size: large;
border: medium solid black;
}
#banana:hover {
font-size: x-large;
border: medium solid white;
background-color: green;
color: white;
padding: 4px;
}
</style>
</head>
<body>
<p>
Hay muchos tipos diferentes de frutas: hay más de 500
variedades de <span id = "banana"> bananas </span> .
Cuando agregamos los innumerables tipos de manzanas, naranjas y otras
frutas conocidas, nos enfrentamos a miles de opciones.
</p>
</body>
</html>
Haz clic aquí para observar el resultado.
En este ejemplo hay un elemento “span” para el cual hay dos estilos específicos. Un estilo se aplica universalmente (con el selector “#banana”) y uno sólo se aplica cuando el usuario mueve el mouse sobre el elemento (con el selector “#banana: hover”).
El navegador responde cuando el usuario mueve el mouse sobre el elemento “span” y aplica los nuevos valores de propiedad inmediatamente.
La función de transición de CSS te permite controlar la velocidad a la que se aplican los nuevos valores de propiedad.
Entonces, por ejemplo, puedes elegir cambiar la apariencia del elemento “span” en el ejemplo gradualmente, para hacer que el efecto de mover el mouse sobre la palabra banana sea menos discordante. A continuación se describen las propiedades que le permiten hacer esto:
Haz clic en cada elemento.
Especifica un retraso después del cual comenzará la transición.
Especifica el lapso de tiempo durante el cual se realizará la transición.
Especifica la propiedad a la que se aplica la transición.
Especifica la forma en que se calculan los valores intermedios durante la transición.
Notación para especificar todos los detalles de una transición en una declaración.
Las propiedades de retraso de transición y duración de transición se especifican como tiempos de CSS, que son un número seguido por ms (para denotar milisegundos) o s (para denotar segundos).
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style>
p {
padding: 5px;
border: medium double black;
background-color: lightgray;
font-family: sans-serif;
}
#banana {
font-size: large;
border: medium solid black;
}
#banana:hover {
font-size: x-large;
border: medium solid white;
background-color: green;
color: white;
padding: 4px;
-webkit-transition-delay: 100ms;
-webkit-transition-property: background-color, color, padding,
font-size, border;
-webkit-transition-duration: 500ms;
}
</style>
</head>
<body>
<p>
Hay muchos tipos diferentes de frutas: hay más de 500
variedades de <span id = "banana"> bananas </span> .
Cuando agregamos los innumerables tipos de manzanas, naranjas y otras
frutas conocidas, nos enfrentamos a miles de opciones.
</p>
</body>
</html>
Haz clic aquí para observar el resultado.
En este ejemplo hemos agregado una transición al estilo que se aplica a través del selector “#banana: hover”. Esta transición se iniciará 100 milisegundos después de que el usuario mueva el mouse sobre el elemento span, tendrá una duración de 500 milisegundos y se aplicarán las propiedades de color de fondo, color, relleno, tamaño de fuente y borde.
Creando transiciones inversa
Las transiciones surten efecto sólo cuando se aplica el estilo con el que están asociadas. El estilo de ejemplo usa el selector “hover”, lo que significa que el estilo sólo se aplica cuando el mouse del usuario está sobre el elemento ”span”. Tan pronto como el usuario aleje el mouse del elemento span, sólo se aplica el estilo “#banana” y, de forma predeterminada, la apariencia del elemento vuelve instantáneamente a su estado original.
Es por esta razón que la mayoría de las transiciones vienen en pares: la transición al estado temporal y la transición inversa en la otra dirección. El ejemplo siguiente muestra cómo puede suavizar el retorno al estilo original mediante la aplicación de una segunda transición:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style>
p {
padding: 5px;
border: medium double black;
background-color: lightgray;
font-family: sans-serif;
}
#banana {
font-size: large;
border: medium solid black;
-webkit-transition-delay: 10ms;
-webkit-transition-duration: 250ms;
}
#banana:hover {
font-size: x-large;
border: medium solid white;
background-color: green;
color: white;
padding: 4px;
-webkit-transition-delay: 100ms;
-webkit-transition-property: background-color, color, padding,
font-size, border;
-webkit-transition-duration: 500ms;
}
</style>
</head>
<body>
<p>
Hay muchos tipos diferentes de frutas: hay más de 500
variedades de <span id = "banana"> bananas </span> .
Cuando agregamos los innumerables tipos de manzanas, naranjas y otras
frutas conocidas, nos enfrentamos a miles de opciones.
</p>
</body>
</html>
Haz clic aquí para observar el resultado.
Seleccionar cómo se calculan los valores intermedios
Cuando utiliza una transición, el navegador debe calcular valores intermedios entre los valores iniciales y finales para cada propiedad. Utiliza la propiedad de función de tiempo de transición para especificar la forma en que se determinan los valores intermedios, expresada como un conjunto de cuatro puntos que representan una curva de Bezier cúbica.
Hay cinco curvas preestablecidas para elegir, las cuales son representadas por los siguientes valores:
La forma más sencilla de dar sentido a estos valores es experimentar en su propio documento HTML. Hay un valor adicional, “cubic-bezier”, que le permite especificar una curva personalizada.
El código siguiente muestra la aplicación de la propiedad transition-timing-function (hemos seleccionado el valor lineal):
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style>
p {
padding: 5px;
border: medium double black;
background-color: lightgray;
font-family: sans-serif;
}
#banana {
font-size: large;
border: medium solid black;
-webkit-transition-delay: 10ms;
-webkit-transition-duration: 250ms;
}
#banana:hover {
font-size: x-large;
border: medium solid white;
background-color: green;
color: white;
padding: 4px;
-webkit-transition-delay: 100ms;
-webkit-transition-property: background-color, color, padding, font-size, border;
-webkit-transition-duration: 500ms;
-webkit-transition-timing-function: linear;
}
</style>
</head>
<body>
<p>
Hay muchos tipos diferentes de frutas: hay más de 500
variedades de <span id="banana"> bananas </span> .
Cuando agregamos los innumerables tipos de manzanas, naranjas y otras
frutas conocidas, nos enfrentamos a miles de opciones.
</p>
</body>
</html>
Haz clic aquí para observar el resultado.
8.2 Usando animaciones
Las animaciones CSS son esencialmente transiciones mejoradas. Tienes más opciones, más control y más flexibilidad en la forma de pasar de un estilo CSS a otro. A continuación se describen las propiedades de la animación:
Haz clic en cada elemento.
Establece un retraso antes de que comience la animación.
Especifica si la animación se debe reproducir hacia atrás en ciclos alternativos.
Especifica el lapso de tiempo durante el cual se realizará la animación.
Especifica el número de veces que se realizará la animación.
Especifica el nombre de la animación.
Permite pausar y reanudar la animación.
Especifica cómo se calculan los valores de animación intermedios.
Propiedad abreviada.
Ten en cuenta que ninguna de estas propiedades te permite especificar las propiedades de CSS que se animarán.
Esto se debe a que las animaciones se definen en dos partes. La primera parte está contenida dentro de la declaración de estilo y usa las propiedades que se muestran en la tabla anterior. Esto define el estilo de la animación, pero no lo que se va a animar. La segunda parte se crea con la regla “@key-frames” y se usa para definir el conjunto de propiedades a las que se aplicará la animación. Puedes ver ambas partes de la animación en el siguiente ejemplo:
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
p {
padding: 5px;
border: medium double black;
background-color: lightgray;
font-family: sans-serif;
}
#banana {
font-size: large;
border: medium solid black;
}
#banana:hover {
-webkit-animation-delay: 100ms;
-webkit-animation-duration: 500ms;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-webkit-animation-name:GrowShrink;
}
@-webkit-keyframes GrowShrink {
to {
font-size: x-large;
border: medium solid white;
background-color: green;
color: white;
padding: 4px;
}
}
</style>
</head>
<body>
<p>
Hay muchos tipos diferentes de frutas: hay más de 500
variedades de <span id="banana"> bananas </span> .
Cuando agregamos los innumerables tipos de manzanas, naranjas y otras
frutas conocidas, nos enfrentamos a miles de opciones.
</p>
</body>
</html>
Haz clic aquí para observar el resultado.
Para comprender lo que está sucediendo en este ejemplo, debes mirar ambas partes de la animación.
La primera parte es el uso de las propiedades de animación en el estilo con el selector “#banana:hover”. Comencemos con las propiedades básicas: la animación comenzará 100 milisegundos después de que se haya aplicado el estilo, tendrá una duración de 500 milisegundos, se repetirá indefinidamente y los valores intermedios se calcularán utilizando la función lineal. Con la excepción de repetir la animación, estas propiedades tienen contrapartidas directas en las transiciones.
Estas propiedades básicas no describen el conjunto de propiedades que se animarán. Para hacer esto, necesitamos usar la propiedad de nombre de animación. Al establecer el valor de esta propiedad en “GrowShrink”, hemos ordenado al navegador que encuentre un conjunto de fotogramas clave llamado “GrowShrink” y utilice los valores de las propiedades básicas para animar las propiedades especificadas por los fotogramas clave.
Trabajando con marcos clave
El aspecto de fotogramas clave de las animaciones CSS es extremadamente flexible y vale la pena explorarlo. En las secciones siguientes mostraremos algunas formas diferentes de expresar fotogramas clave para crear efectos más complejos.
Establecer un estado inicial
En el ejemplo anterior, los valores iniciales para las propiedades animadas se tomaron del elemento mismo. Puede especificar un conjunto alternativo de valores iniciales usando la cláusula “from”, como se muestra en el ejemplo siguiente:
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
p {
padding: 5px;
border: medium double black;
background-color: lightgray;
font-family: sans-serif;
}
#banana {
font-size: large;
border: medium solid black;
}
#banana:hover {
-webkit-animation-delay: 100ms;
-webkit-animation-duration: 500ms;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-webkit-animation-name:GrowShrink;
}
@-webkit-keyframes GrowShrink {
from {
font-size: xx-small;
background-color: red;
}
to {
font-size: x-large;
border: medium solid white;
background-color: green;
color: white;
padding: 4px;
}
}
</style>
</head>
<body>
<p>
Hay muchos tipos diferentes de frutas: hay más de 500
variedades de <span id="banana"> bananas </span> .
Cuando agregamos los innumerables tipos de manzanas, naranjas y otras
frutas conocidas, nos enfrentamos a miles de opciones.
</p>
</body>
</html>
Haz clic aquí para observar el resultado.
En este ejemplo proporcionamos valores iniciales para las propiedades de tamaño de fuente y color de fondo.
Los valores iniciales para las otras propiedades especificadas en la cláusula “to” se tomarán del elemento cuando comience la animación. El tamaño del texto y el color de fondo del elemento “span” cambian a los valores iniciales especificados en la cláusula “from” al comienzo de la animación.
Especificación de marcos clave intermedios
Puedes agregar marcos clave adicionales para definir etapas intermedias en la animación. Para ello, agregamos cláusulas de porcentaje, como se muestra en el ejemplo siguiente:
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
p {
padding: 5px;
border: medium double black;
background-color: lightgray;
font-family: sans-serif;
}
#banana {
font-size: large;
border: medium solid black;
}
#banana:hover {
-webkit-animation-delay: 100ms;
-webkit-animation-duration: 500ms;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-webkit-animation-name:GrowShrink;
}
@-webkit-keyframes GrowShrink {
from {
font-size: xx-small;
background-color: red;
}
50% {
background-color: yellow;
padding: 1px;
}
75% {
color: white;
padding: 2px;
}
to {
font-size: x-large;
border: medium solid white;
background-color: green;
color: white;
padding: 4px;
}
}
</style>
</head>
<body>
<p>
Hay muchos tipos diferentes de frutas: hay más de 500
variedades de <span id="banana"> bananas </span> .
Cuando agregamos los innumerables tipos de manzanas, naranjas y otras
frutas conocidas, nos enfrentamos a miles de opciones.
</p>
</body>
</html>
Haz clic aquí para observar el resultado.
Para cada cláusula de porcentaje, define el punto en la animación donde las propiedades y valores especificados en la cláusula deben aplicarse completamente. En este ejemplo, se ha definido una cláusula del 50% y una del 75%.
Establecer la dirección de repetición
Cuando configuras una animación para repetir, puedes elegir qué sucede cuando el navegador llega al final de la animación. Tú especificas su preferencia usando la propiedad de dirección de la animación, con los valores que se describen a continuación:
Haz clic en cada elemento.
Cada iteración de la animación se reproduce hacia adelante. Si hay varias iteraciones, el elemento vuelve a su estado inicial y la animación se repite.
La animación se reproduce hacia adelante y luego hacia atrás. Estas son dos iteraciones de la animación a los efectos de la propiedad de iteración de animación.
A continuacion un ejemplo:
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
p{
padding: 5px;
border: medium double black;
background-color: lightgray;
font-family: sans-serif;
}
#banana {
font-size: large;
border: medium solid black;
}
#banana:hover {
-webkit-animation-delay: 100ms;
-webkit-animation-duration: 250ms;
-webkit-animation-iteration-count: 2;
-webkit-animation-timing-function: linear;
-webkit-animation-name: GrowShrink;
-webkit-animation-direction: alternate;
}
@-webkit-keyframes GrowShrink {
to {
font-size: x-large;
border: medium solid white;
background-color: green;
padding: 4px;
}
}
</style>
</head>
<body>
<p>
Hay muchos tipos diferentes de frutas: hay más de 500
variedades de <span id="banana"> bananas </span> .
Cuando agregamos los innumerables tipos de manzanas, naranjas y otras
frutas conocidas, nos enfrentamos a miles de opciones.
</p>
</body>
</html>
Haz clic aquí para observar el resultado.
En este ejemplo, hemos usado la propiedad “animation-iteration-count” para especificar que la animación se debe realizar sólo dos veces. Al final de la segunda iteración, el elemento animado volverá a su estado original. Hemos usado el valor alternativo para la propiedad de dirección de animación “animation-direction” para que la animación se reproduzca hacia delante y hacia atrás.
Comprensión del estado final
Una de las limitaciones de las animaciones CSS es que los valores para las propiedades definidas por los fotogramas clave en una animación sólo se aplican durante la animación misma. Al final de la animación, la apariencia del elemento animado volverá a su estado original.
La razón por la que esto ocurre es porque las animaciones CSS animan la aplicación de un nuevo estilo, pero no realizan ningún cambio persistente. Si desea conservar la apariencia del elemento al final de la animación, debe usar una transición.
Aplicación de animaciones al diseño inicial
Una ventaja que tienen las animaciones sobre las transiciones es que puedes aplicarlas al diseño inicial de la página. A continuacion un ejemplo:
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
p {
padding: 5px;
border: medium double black;
background-color: lightgray;
font-family: sans-serif;
}
#banana {
font-size: large;
border: medium solid black;
-webkit-animation-duration: 2500ms;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: alternate;
-webkit-animation-timing-function: linear;
-webkit-animation-name: ColorSwap;
}
@-webkit-keyframes ColorSwap {
to {
border: medium solid white;
background-color: green;
}
}
</style>
</head>
<body>
<p>
Hay muchos tipos diferentes de frutas: hay más de 500
variedades de <span id="banana"> bananas </span> .
Cuando agregamos los innumerables tipos de manzanas, naranjas y otras
frutas conocidas, nos enfrentamos a miles de opciones.
</p>
</body>
</html>
Haz clic aquí para observar el resultado.
En este ejemplo hemos definido la animación en el estilo con el selector “#banana”. Este estilo se aplica automáticamente cuando se carga la página, lo que significa que la animación se aplica tan pronto como el navegador muestra el código HTML.
Reutilizando cuadros clave
Puedes usar el mismo conjunto de fotogramas clave para múltiples animaciones, cada una de las cuales se puede configurar con diferentes valores para las propiedades de la animación. El ejemplo siguiente da una demostración.
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
p {
padding: 5px;
border: medium double black;
background-color: lightgray;
font-family: sans-serif;
}
span {
font-size: large;
border: medium solid black;
}
#banana {
-webkit-animation-duration: 2500ms;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: alternate;
-webkit-animation-timing-function: linear;
-webkit-animation-name: ColorSwap;
}
#apple {
-webkit-animation-duration: 500ms;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: normal;
-webkit-animation-timing-function: ease-in-out;
-webkit-animation-name: ColorSwap;
}
@-webkit-keyframes ColorSwap {
to {
border: medium solid white;
background-color: green;
}
}
</style>
</head>
<body>
<p>
Hay muchos tipos diferentes de frutas: hay más de 500
variedades de <span id="banana"> bananas </span> .
Cuando agregamos los innumerables tipos de <span id="apple"> manzanas </span>,
naranjas y otras frutas conocidas, nos enfrentamos a miles de opciones.
</p>
</body>
</html>
Haz clic aquí para observar el resultado.
El ejemplo anterior muestra dos estilos, cada uno de los cuales utiliza los marcos clave de “ColorSwap”. La animación asociada con el selector #apple se realizará en una dirección corta, utilizando una función de tiempo diferente y también se reproducirá hacia adelante.
Aplicar múltiples animaciones a múltiples elementos
Una variación en el ejemplo anterior es apuntar a múltiples elementos con la misma animación. Para ello, expande el alcance del selector para el estilo que contiene los detalles de la animación, como se muestra en el siguiente ejemplo:
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
p {
padding: 5px;
border: medium double black;
background-color: lightgray;
font-family: sans-serif;
}
span {
font-size: large;
border: medium solid black;
}
#banana, #apple {
-webkit-animation-duration: 2500ms;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: alternate;
-webkit-animation-timing-function: linear;
-webkit-animation-name: ColorSwap;
}
@-webkit-keyframes ColorSwap {
to {
border: medium solid white;
background-color: green;
}
}
</style>
</head>
<body>
<p>
Hay muchos tipos diferentes de frutas: hay más de 500
variedades de <span id="banana"> bananas </span> .
Cuando agregamos los innumerables tipos de <span id="apple"> manzanas </span>,
naranjas y otras frutas conocidas, nos enfrentamos a miles de opciones.
</p>
</body>
</html>
Haz clic aquí para observar el resultado.
En este ejemplo, el selector combina ambos elementos del span en el documento, por lo que ambos se animarán utilizando los mismos fotogramas clave y la misma configuración.
Detener e iniciar animaciones
Puedes detener y reanudar una animación a través de la propiedad “animation-play-state”. Cuando esta propiedad tiene un valor de “paused”, la animación se detendrá. El valor de “running” reanudará la animación. A continuación un ejemplo muestra cómo se puede usar JavaScript para cambiar el valor de esta propiedad:
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
#fruittext {
padding: 5px;
border: medium double black;
background-color: lightgray;
font-family: sans-serif;
}
#banana {
-webkit-animation-duration: 2500ms;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: alternate;
-webkit-animation-timing-function: linear;
-webkit-animation-name: GrowShrink;
}
@-webkit-keyframes GrowShrink {
from {
font-size: large;
border: medium solid black;
}
to {
font-size: x-large;
border: medium solid white;
background-color: green;
color: white;
padding: 4px;
}
}
</style>
</head>
<body>
<p id="fruittext">
Hay muchos tipos diferentes de frutas: hay más de 50 variedades de <span id="banana"> bananas </span> .
Cuando agregamos los innumerables tipos de manzanas, naranjas y otras frutas conocidas, nos enfrentamos a miles de opciones.
</p>
<p>
<button id="Boton1">Corriendo</button>
<button id="Boton2">Pausado</button>
</p>
<script>
var button1 = document.getElementById("Boton1");
var button2 = document.getElementById("Boton2");
button1.onclick = function (e)
{
document.getElementById("banana").style.WebkitAnimationPlayState = "running";
};
button2.onclick = function (e) {
document.getElementById("banana").style.WebkitAnimationPlayState = "paused";
};
</script>
</body>
</html>
Haz clic aquí para observar el resultado.
8.3 Usando transformaciones
Las transformaciones CSS te permiten aplicar transformaciones lineales a elementos, lo que significa que puede rotar, escalar, sesgar y trasladar elementos. A continuación se muestran las propiedades que se usan para aplicar transformaciones:
Haz clic en cada elemento.
Especifica la función de transformación a aplicar.
Especifica el origen de la transformación.
Aplicando una transformación
Aplica una transformación a un elemento a través de la propiedad de transformación. Los valores permitidos para esta propiedad son un conjunto de funciones predefinidas, como se describe a continuación:
Valor |
Descripción |
translate(<length or %>) |
Traslada un elemento en X, Y o ambas direcciones. |
scale(<number>) |
Escala un elemento a lo largo de uno o ambos ejes. |
rotate(<angle>) |
Gira un elemento. |
skew(<angle>) |
Sesgar un elemento a lo largo de uno o ambos ejes. |
matrix(4-6 x <number>) |
Especifica una transformación personalizada. |
Puedes ver un ejemplo de una transformación en el ejemplo siguiente:
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
p {
padding: 5px;
border: medium double black;
background-color: lightgray;
font-family: sans-serif;
}
#banana {
font-size: x-large;
border: medium solid white;
background-color: green;
color: white;
padding: 4px;
-ms-transform: rotate(-45deg) scaleX(1.2);
}
</style>
</head>
<body>
<p id="fruittext">
Hay muchos tipos diferentes de frutas: hay más de 50 variedades de <span id="banana"> bananas </span> .
Cuando agregamos los innumerables tipos de manzanas, naranjas y otras frutas conocidas, nos enfrentamos a miles de opciones.
</p>
</body>
</html>
En este ejemplo hemos agregado una declaración de propiedad de transformación al estilo “#banana”, especificando dos transformaciones. La primera es una rotación de -45 grados (es decir, una rotación de 45 grados en sentido antihorario) y la segunda es una escala con un factor de 1.2 a lo largo del eje x.
Haz clic aquí para observar el resultado.
Como puedes ver, el elemento se ha rotado y ampliado según lo especificado. Ten en cuenta que el diseño de la página no ha cambiado para acomodar las transformaciones. El elemento sobrescribe parte del contenido circundante.
Especificando un origen
La propiedad de origen de transformación “transform-origin” te permite especificar el origen alrededor del cual se aplicará la transformación. Por defecto, se usa el centro del elemento, pero puede seleccionar un origen diferente usando los valores descritos en la tabla siguiente:
Haz clic en cada elemento.
Especifica el origen de los elementos eje x o y.
Especifica una distancia.
Especifica una posición en el eje x.
Especifica una posición en el eje y.
Para definir un valor, proporciona un valor para cada uno de los ejes x, y. Si proporciona sólo un valor, se supone que el segundo valor es el centro. El ejemplo siguiente muestra el uso de la propiedad de origen de transformación.
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
p {
padding: 5px;
border: medium double black;
background-color: lightgray;
font-family: sans-serif;
}
#banana {
font-size: x-large;
border: medium solid white;
background-color: green;
color: white;
padding: 4px;
-ms-transform: rotate(-45deg) scaleX(1.2);
-ms-transform-origin: right top;
}
</style>
</head>
<body>
<p id="fruittext">
Hay muchos tipos diferentes de frutas: hay más de 50 variedades de <span id="banana"> bananas </span> .
Cuando agregamos los innumerables tipos de manzanas, naranjas y otras frutas conocidas, nos enfrentamos a miles de opciones.
</p>
</body>
</html>
Haz clic aquí para observar el resultado.
En este ejemplo hemos movido el origen a la esquina superior derecha del elemento.
Animando y transitando una transformación
Puedes aplicar animaciones y transiciones a una transformación, tal como lo haría con cualquier otra propiedad de CSS.
El ejemplo siguiente contiene una demostración:
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
p {
padding: 5px;
border: medium double black;
background-color: lightgray;
font-family: sans-serif;
}
#banana {
font-size: x-large;
border: medium solid white;
background-color: green;
color: white;
padding: 4px;
}
#banana:hover {
-moz-transition-duration: 1.5s; /*Para navegador mozilla*/
-moz-transform: rotate(360deg); /*Para navegador mozilla*/
-ms-transform: rotate(360deg); /*Para navegador internet explorer*/
}
</style>
</head>
<body>
<p id="fruittext">
Hay muchos tipos diferentes de frutas: hay más de 50 variedades de <span id="banana"> bananas </span> .
Cuando agregamos los innumerables tipos de manzanas, naranjas y otras frutas conocidas, nos enfrentamos a miles de opciones.
</p>
</body>
</html>
Haz clic aquí para observar el resultado.
En este ejemplo hemos definido una transición que aplicará una transformación de rotación de 360 grados durante un periodo de 1,5 segundos. Esta transición se aplicará cuando el usuario pase sobre el elemento span.
Cierre
Para tu proyecto final puedes mejorar la animación de tu splash screen con los conocimientos que acabas de adquirir. También la interfaz de tu proyecto puede ser modificada para que responda con mayor suavidad a la interacción del usuario.
Prepara la interfaz e implementa animaciones reusables en lo posible, usando CCS3.
Checkpoint
Asegúrate de:
Referencias