From 1109132f09d75da9a28b649c7677bb6ce07c40c0 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:41:45 -0500 Subject: initial commit --- files/es/web/css/transition/index.html | 128 +++++++++++++++++++++++++++++++++ 1 file changed, 128 insertions(+) create mode 100644 files/es/web/css/transition/index.html (limited to 'files/es/web/css/transition/index.html') diff --git a/files/es/web/css/transition/index.html b/files/es/web/css/transition/index.html new file mode 100644 index 0000000000..b9b69000c1 --- /dev/null +++ b/files/es/web/css/transition/index.html @@ -0,0 +1,128 @@ +--- +title: transition +slug: Web/CSS/transition +translation_of: Web/CSS/transition +--- +

{{ CSSRef("CSS Transitions") }}

+ +

{{ SeeCompatTable() }}

+ +

Sumario

+ +

La propiedad transition es una propiedad abreviada de {{ cssxref("transition-property") }}, {{ cssxref("transition-duration") }}, {{ cssxref("transition-timing-function") }}, y {{ cssxref("transition-delay") }}. Permite definir la transición entre dos estados de un elemento. Hay diferentes estados que pueden ser definidos utilizando pseudo-clases como {{cssxref(":hover")}} o {{cssxref(":active")}}  o aplicado dinámicamente usando JavaScript.

+ +

{{cssinfo}}

+ +

Sintaxis

+ +
/* Aplicar a 1 propiedad */
+/* nombre de la propiedad | duración */
+transition: margin-left 4s;
+
+/* nombre de la propiedad | duración | retardo */
+transition: margin-left 4s 1s;
+
+/* nombre de la propiedad | duración | función | retardo */
+transition: margin-left 4s ease-in-out 1s;
+
+/* Aplicar a 2 propiedades */
+transition: margin-left 4s, color 1s;
+
+/* Aplicar a todas las propiedades que cambien */
+transition: all 0.5s ease-out;
+
+ +

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.

+ +

Sintaxis formal

+ +
{{csssyntax("transition")}}
+
+ +

Ejemplos

+ +

Hay muchos ejemplos de transiciones CSS en el artículo principal CSS transitions.

+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{ SpecName('CSS3 Transitions', '#transition', 'transition') }}{{ Spec2('CSS3 Transitions') }} 
+ +

Compatibilidad de navegadores

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support1.0 {{ property_prefix("-webkit") }}
+ 26.0		{{ CompatGeckoDesktop("2.0") }} {{ property_prefix("-moz") }}
+ {{ CompatGeckoDesktop("16.0") }}		10.011.6 {{ property_prefix("-o") }}
+ 12.10 #		3.0 {{ property_prefix("-webkit") }}
+ 6.1
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support2.1 {{ property_prefix("-webkit") }}{{ CompatGeckoMobile("2.0") }} {{ property_prefix("-moz") }}
+ {{ CompatGeckoMobile("16.0") }}		{{ CompatUnknown() }}10.0 {{ property_prefix("-o") }}
+ 12.10 #		3.2 {{ property_prefix("-webkit") }}
+
+ +

Véase también

+ + -- cgit v1.2.3-54-g00ecf