1. Tecnología web para desarrolladores
  2. CSS
  3. transition-duration

Esta página ha sido traducida del inglés por la comunidad. Aprende más y únete a la comunidad de MDN Web Docs.

View in English Always switch to English

transition-duration

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨septiembre de 2015⁩.

La propiedad de CSS transition-duration establece el tiempo que debe tardar una animación de transición en completarse. Por defecto, el valor es de 0s, esto quiere decir que no se producirá ninguna animación.

Pruébalo 

transition-duration: 500ms;
transition-property: margin-right;

transition-duration: 2s;
transition-property: background-color;

transition-duration: 2s;
transition-property: margin-right, color;

transition-duration: 3s, 1s;
transition-property: margin-right, color;

<section id="default-example">
 <div id="example-element">Hover to see<br />the transition.</div>
</section>

#example-element {
 background-color: #e4f0f5;
 color: #000;
 padding: 1rem;
 border-radius: 0.5rem;
 font: 1em monospace;
 width: 100%;
 transition: margin-right 2s;
}
#default-example:hover > #example-element {
 background-color: #909;
 color: #fff;
 margin-right: 40%;
}

Se puede especificar múltiples duraciones; cada duración va a ser aplicada a la propiedad correspondiente según lo especificado en la propiedad transition-property, que actuará como una lista maestra. Si se especifican menos duraciones en la lista maestra, el agente de usuario repetirá la lista de duraciones. Si hay más duraciones, la lista simplemente se trunca al tamaño correcto. En ambos casos, la declaración CSS sigue siendo válida

Sintaxis

css
/* <time> values */
transition-duration: 6s;
transition-duration: 120ms;
transition-duration: 1s, 15s;
transition-duration: 10s, 30s, 230ms;
/* Global values */
transition-duration: inherit;
transition-duration: initial;
transition-duration: unset;

Valores

<time>

El <time> indica la cantidad de tiempo que debe tomar la transición del valor anterior de una propiedad, al nuevo valor. Un tiempo de 0s indica que no ocurrirá ninguna transición, es decir, el cambio entre los dos estados será instantáneo. Un valor negativo para el tiempo hace que la declaración sea inválida.

Sintaxis Formal 

transition-duration = 
 <time [0s,∞]> #
Esta sintaxis refleja el estándar más reciente según CSS Transitions. Es posible que no todos los navegadores hayan implementado todas las partes. Consulte Compatibilidad del navegador para obtener información de soporte.

Ejemplos

transition-duration: 0.5s

<div class="parent">
 <div class="box">Lorem</div>
</div>

.parent {
 width: 250px;
 height: 125px;
}
.box {
 width: 100px;
 height: 100px;
 background-color: red;
 font-size: 20px;
 left: 0px;
 top: 0px;
 position: absolute;
 -webkit-transition-property: width height background-color font-size left top
 transform -webkit-transform color;
 -webkit-transition-duration: 0.5s;
 -webkit-transition-timing-function: ease-in-out;
 transition-property: width height background-color font-size left top
 transform -webkit-transform color;
 transition-duration: 0.5s;
 transition-timing-function: ease-in-out;
}
.box1 {
 transform: rotate(270deg);
 -webkit-transform: rotate(270deg);
 width: 50px;
 height: 50px;
 background-color: blue;
 color: yellow;
 font-size: 18px;
 left: 150px;
 top: 25px;
 position: absolute;
 -webkit-transition-property: width height background-color font-size left top
 transform -webkit-transform color;
 -webkit-transition-duration: 0.5s;
 -webkit-transition-timing-function: ease-in-out;
 transition-property: width height background-color font-size left top
 transform -webkit-transformv color;
 transition-duration: 0.5s;
 transition-timing-function: ease-in-out;
}

function updateTransition() {
 var el = document.querySelector("div.box");
 if (el) {
 el.className = "box1";
 } else {
 el = document.querySelector("div.box1");
 el.className = "box";
 }
 return el;
}
var intervalID = window.setInterval(updateTransition, 7000);

transition-duration: 1s

<div class="parent">
 <div class="box">Lorem</div>
</div>

.parent {
 width: 250px;
 height: 125px;
}
.box {
 width: 100px;
 height: 100px;
 background-color: red;
 font-size: 20px;
 left: 0px;
 top: 0px;
 position: absolute;
 -webkit-transition-property: width height background-color font-size left
 top -webkit-transform color;
 -webkit-transition-duration: 1s;
 -webkit-transition-timing-function: ease-in-out;
 transition-property: width height background-color font-size left top
 transform color;
 transition-duration: 1s;
 transition-timing-function: ease-in-out;
}
.box1 {
 transform: rotate(270deg);
 -webkit-transform: rotate(270deg);
 width: 50px;
 height: 50px;
 background-color: blue;
 color: yellow;
 font-size: 18px;
 left: 150px;
 top: 25px;
 position: absolute;
 -webkit-transition-property: width height background-color font-size left
 top -webkit-transform transform color;
 -webkit-transition-duration: 1s;
 -webkit-transition-timing-function: ease-in-out;
 transition-property: width height background-color font-size left top
 transform -webkit-transform color;
 transition-duration: 1s;
 transition-timing-function: ease-in-out;
}

function updateTransition() {
 var el = document.querySelector("div.box");
 if (el) {
 el.className = "box1";
 } else {
 el = document.querySelector("div.box1");
 el.className = "box";
 }
 return el;
}
var intervalID = window.setInterval(updateTransition, 7000);

transition-duration: 2s

<div class="parent">
 <div class="box">Lorem</div>
</div>

.parent {
 width: 250px;
 height: 125px;
}
.box {
 width: 100px;
 height: 100px;
 background-color: red;
 font-size: 20px;
 left: 0px;
 top: 0px;
 position: absolute;
 -webkit-transition-property: width height background-color font-size left top
 transform -webkit-transform color;
 -webkit-transition-duration: 2s;
 -webkit-transition-timing-function: ease-in-out;
 transition-property: width height background-color font-size left top
 transform -webkit-transform color;
 transition-duration: 2s;
 transition-timing-function: ease-in-out;
}
.box1 {
 transform: rotate(270deg);
 -webkit-transform: rotate(270deg);
 width: 50px;
 height: 50px;
 background-color: blue;
 color: yellow;
 font-size: 18px;
 left: 150px;
 top: 25px;
 position: absolute;
 -webkit-transition-property: width height background-color font-size left top
 transform -webkit-transform color;
 -webkit-transition-duration: 2s;
 -webkit-transition-timing-function: ease-in-out;
 transition-property: width height background-color font-size left top
 transform -webkit-transform color;
 transition-duration: 2s;
 transition-timing-function: ease-in-out;
}

function updateTransition() {
 var el = document.querySelector("div.box");
 if (el) {
 el.className = "box1";
 } else {
 el = document.querySelector("div.box1");
 el.className = "box";
 }
 return el;
}
var intervalID = window.setInterval(updateTransition, 7000);

transition-duration: 4s

<div class="parent">
 <div class="box">Lorem</div>
</div>

.parent {
 width: 250px;
 height: 125px;
}
.box {
 width: 100px;
 height: 100px;
 background-color: red;
 font-size: 20px;
 left: 0px;
 top: 0px;
 position: absolute;
 -webkit-transition-property: width height background-color font-size left top
 transform -webkit-transform color;
 -webkit-transition-duration: 4s;
 -webkit-transition-timing-function: ease-in-out;
 transition-property: width height background-color font-size left top
 transform -webkit-transform color;
 transition-duration: 4s;
 transition-timing-function: ease-in-out;
}
.box1 {
 transform: rotate(270deg);
 -webkit-transform: rotate(270deg);
 width: 50px;
 height: 50px;
 background-color: blue;
 color: yellow;
 font-size: 18px;
 left: 150px;
 top: 25px;
 position: absolute;
 -webkit-transition-property: width height background-color font-size left top
 transform -webkit-transform color;
 -webkit-transition-duration: 4s;
 -webkit-transition-timing-function: ease-in-out;
 transition-property: width height background-color font-size left top
 transform -webkit-transform color;
 transition-duration: 4s;
 transition-timing-function: ease-in-out;
}

function updateTransition() {
 var el = document.querySelector("div.box");
 if (el) {
 el.className = "box1";
 } else {
 el = document.querySelector("div.box1");
 el.className = "box";
 }
 return el;
}
var intervalID = window.setInterval(updateTransition, 7000);

Especificaciones

Specification
CSS Transitions
# transition-duration-property

Compatibilidad con navegadores

También puede ver

Help improve MDN

Learn how to contribute

This page was last modified on by MDN contributors.

AltStyle によって変換されたページ (->オリジナル) /