CSS transition Property

La propiedad CSS transition es una propiedad abreviada para las siguientes propiedades:

La propiedad transition es una de las propiedades CSS3.

Los valores de transition-duration y transition-delay pueden especificarse en cualquier orden. Sin embargo, si se omite transition-duration, su valor predeterminado es 0s, lo que impide que la transición se anime.

Las propiedades se separan con comas.

info

El valor none es válido y desactiva las transiciones para las propiedades especificadas.

La propiedad transition permite especificar la transición entre dos estados de un elemento. Los distintos estados pueden definirse usando pseudoclases como :hover o :active o con la ayuda de JavaScript.

info

Los prefijos de proveedor como -webkit-, -moz- y -o- son heredados y, por lo general, no son necesarios para los navegadores modernos.

Initial Value	all 0s ease 0s
Applies to	All elements, ::before and ::after pseudo-elements.
Inherited	No.
Animatable	No.
Version	CSS3
DOM Syntax	Object.style.transition = "all 3s";

Sintaxis

Sintaxis de la propiedad CSS transition

transition: transition-property | transition-duration | transition-timing-function |  transition-delay | initial | inherit;

Ejemplo de la propiedad transition con la pseudoclase :active:

Ejemplo de la propiedad CSS transition

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        width: 150px;
        height: 100px;
        background: #8ebf42;
        transition: width 2s;
      }
      div:active {
        width: 600px;
      }
    </style>
  </head>
  <body>
    <h2>Transition property example</h2>
    <p>Click and hold to see the transition effect.</p>
    <div></div>
  </body>
</html>

Pruébalo tú mismo »

Ejemplo de la propiedad transition con la pseudoclase :hover:

Ejemplo de la propiedad CSS transition con la pseudoclase :hover

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      body {
        background-color: #fff;
        color: #000;
        font-size: 1em;
        font-family: 'Roboto', Helvetica, sans-serif;
      }
      .element {
        padding: 20px;
        width: 50px;
        height: 50px;
        left: 0;
        background-color: #8ebf42;
        position: relative;
        transition: left 1s ease-in-out, background-color 1s ease-out 1s;
      }
      .example:hover .element {
        left: 400px;
        background-color: #1c87c9;
      }
      .element-2 {
        transition: none;
      }
    </style>
  </head>
  <body>
    <h2>Transition property example</h2>
    <div class="example">
      <p>Hover over the container to see the transition effect.</p>
      <div class="element element-1"></div>
      <p>No transition:</p>
      <div class="element element-2"></div>
    </div>
  </body>
</html>

Pruébalo tú mismo »

Valores

Value	Description
transition-property	Especifica los nombres de las propiedades para la transición.
transition-duration	Especifica la duración de la animación de la transición.
transition-timing-function	Especifica la velocidad a lo largo del tiempo de un objeto que se está transicionando de un valor a otro.
transition-delay	Especifica la cantidad de tiempo que se debe esperar antes de que se anime un efecto de transición.
initial	Hace que la propiedad use su valor predeterminado.
inherit	Hereda la propiedad del elemento padre.

Practice

Práctica

What properties of CSS Transition can be changed?