 |
Transiciones de una propiedad (transition)
La propiedad background-origin especifica el área de origen de un fondo o imagen en determinada caja. para que la propiedad background-position calcule la posición de inicio de un fondo o imagen definida por la propiedad background-image.
Nótese que el orden es importante dentro de los elementos de la propiedad. El primer valor que puede ser analizado como tiempo es asignado a la propiedad transition-duration, y el segundo valor que puede ser analizado como tiempo es asignado a la propiedad transition-delay.
Véase cuando la lista de valores de propiedades son de diferentes tamaños para más detalles de cómo se manejan las cosas cuando la lista de valores de propiedades no son de tamaños iguales. En resumen, las descripciones extras más allá del número de propiedades que son animadas son ignoradas.
Las transiciones en css3 permiten modificar el valor de una propiedad de un elemento HTML en forma gradual durante un tiempo determinado de un estado inicial a un estado final.
La sintaxis más simple para definir una transición de una propiedad es:
transition: [nombre de propiedad] [duración de la transición]
; }
En este opción, aprenderá sobre las siguientes propiedades:
- transition
- transition-delay : 0s
- transition-duration : 0s
- transition-property : all
- transition-timing-function : ease
Para crear un efecto de transición, debe especificar dos cosas:
- la propiedad CSS a la que desea agregar un efecto
- la duración del efecto
Si no se especifica la parte de duración, la transición no tendrá efecto, porque el valor predeterminado es 0.
El siguiente ejemplo muestra un elemento <div> rojo de 100px * 100px. El elemento <div> también ha especificado un efecto de transición para la propiedad de ancho, con una duración de 2 segundos:
<head>
<style>
.op1 {
width: 100px;
height: 100px;
background: red;
transition: width 2s;
}
.op1:hover {
width: 300px;
background: coral;
}
</style>
</head>
<body>
<h1>La propiedad de transición</h1>
<p>Desplácese sobre el elemento div a continuación para ver el efecto de transición:</p>
<div class='op1'></div>
<p><b>Nota:</b> Este ejemplo no funciona en Internet Explorer 9 y versiones anteriores..</p>
</body>
</html>
El efecto de transición comenzará cuando la propiedad CSS especificada ancho y el color cambien de valores.
Desplácese sobre los elementos div a continuación para ver las diferentes curvas de velocidad:
Nota: Este ejemplo no funciona en Internet Explorer 9 y versiones anteriores..
El efecto de transición comenzará cuando la propiedad CSS especificada ancho, alto y el color cambien de valores, el alto y ancho varía en tiempo.
Desplácese sobre los elementos div a continuación para ver las diferentes curvas de velocidad:
Nota: Este ejemplo no funciona en Internet Explorer 9 y versiones anteriores..
Especificar la curva de velocidad de la transición
La propiedad transition-timing-function especifica la curva de velocidad del efecto de transición.
La propiedad de función de tiempo de transición puede tener los siguientes valores:
- ease - especifica un efecto de transición con un inicio lento, luego rápido, luego termina lentamente (esto es predeterminado)
- linear - especifica un efecto de transición con la misma velocidad de principio a fin
- ease-in - especifica un efecto de transición con un inicio lento
- ease-out - especifica un efecto de transición con un final lento
- ease-in-out - especifica un efecto de transición con un inicio y un final lentos
- cubic-bezier(n,n,n,n) - le permite definir sus propios valores en una función cúbica-bezier
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
transition: width 2s;
}#div1 {transition-timing-function: linear;background: red; }
#div2 {transition-timing-function: ease; background: green;}
#div3 {transition-timing-function: ease-in;background: coral;}
#div4 {transition-timing-function: ease-out;background: gold;}
#div5 {transition-timing-function: ease-in-out;background: lightgreen;}
div:hover {
width: 300px;
}
</style>
</head>
<body>
<h1>La propiedad de transition-timing</h1>
<p>Hover over the div elements below, to see the different speed curves:</p>
<div id="div1">linear</div><br>
<div id="div2">ease</div><br>
<div id="div3">ease-in</div><br>
<div id="div4">ease-out</div><br>
<div id="div5">ease-in-out</div><br>
<p><b>Nota:</b> Este ejemplo no funciona en Internet Explorer 9 y versiones anteriores...</p>
</body>
</html>
Desplácese sobre los elementos div a continuación para ver las diferentes curvas de velocidad:
Nota: Este ejemplo no funciona en Internet Explorer 9 y versiones anteriores...