Cursos Empresas Blog Live Conf Eventos Precios

0:0011:36

Recursos

Resumen

Recapitulando, las transformaciones ocurren instantáneamente, sin embargo, estos cambios son no permiten crear una animación. La propiedad transition de CSS sirve para agregar un intervalo de tiempo a un elemento HTML para visualizar los cambios de una transformación.

transition: [property] [duration] [timing-function] [delay];

transition-property (obligatoria)
transition-duration (obligatoria)
transition-timing-function (opcional)
transition-delay (opcional)

Propiedades obligatorias para una transición

transition-property: esta propiedad sirve para especificar el elemento HTML de la transición. Si la transición es para todos los elementos, su valor es all.
transition-duration: esta propiedad sirve para agregar un intervalo de tiempo en segundos o milisegundos (1s = 1000ms).

selector {
    transition: transform 100ms;
    transition: all 2s;
}

Ejemplo sin transiciones.

Transiciones CSS: Transition Property y Transition Duration

Curso de Transformaciones y Transiciones en CSS

Clase 12 / 20

Ver clases

Transiciones CSS: Transition Property y Transition Duration

Curso de Transformaciones y Transiciones en CSS

Clase 12 de 20

Clase 12 / 20

Transiciones CSS: Transition Property y Transition Duration

Curso de Transformaciones y Transiciones en CSS

Clase 12 / 20

Ver clases

Comentarios

Carlos Eduardo Gomez García#2590184

¡La propiedad transition es la que hace toda la magía! Si ya tienes un elemento con un estado inicial y otro elemento con un estado final, entonces simplemente basta con que le ponas esta propiedad y se animará sin problema ;) . Es decir, pasaras de tener esto:

!Transition no animated

A tener esto:

!Transition animated

Sí, así de fácil :D

Sebastian Heredia#2591231

Conclusión

A la profe le encanta este color :)

background: papayawhip;

Irving Juárez#2625386

Cuando tu quieras que se le aplique transiciones a solo dos propiedades, puedes hacerlo solo con una coma. Veamos el siguiente ejemplo: .

transition-property: transform, border-radius;

Ya con eso, ya no tenemos que poner el valor all. . Aqui mi ejercicio

Rigoberto Maldonado#3064765

Que tal, buen dia campeon.. mi resultado.

<div class="container">
        <div class="container-card">
          <div class="face front"><img src="./images/face.png" alt=""></div>
          <div class="face back"><img src="./images/as.png" alt=""></div>
        </div>
        <div class="container-card">
          <div class="face front"><img src="./images/face.png" alt=""></div>
          <div class="face back"><img class="img-nipe" src="./images/kk.png" alt=""></div>
        </div>
        <div class="container-card">
          <div class="face front"><img src="./images/face.png" alt=""></div>
          <div class="face back"><img class="img-nipe" src="./images/jj.png" alt=""></div>
        </div>
      </div>

<div class="container">
        <div class="container-card">
          <div class="face front"><img src="./images/face.png" alt=""></div>
          <div class="face back"><img src="./images/as.png" alt=""></div>
        </div>
        <div class="container-card">
          <div class="face front"><img src="./images/face.png" alt=""></div>
          <div class="face back"><img class="img-nipe" src="./images/kk.png" alt=""></div>
        </div>
        <div class="container-card">
          <div class="face front"><img src="./images/face.png" alt=""></div>
          <div class="face back"><img class="img-nipe" src="./images/jj.png" alt=""></div>
        </div>
      </div>

.container {
  display: grid;
  grid-template-columns: repeat(3, minmax(100px, 200px));
  grid-gap: 10px;
  border: 1px solid #ccc;
  width: 100%;
  height: 60vh;
  align-items: center;
  place-content: center;
  cursor: pointer;
  background: #f2f2f2;
  padding-bottom: 22%;
  background-image: url(../images/table.png);
  background-repeat: no-repeat;
  background-size: cover;

}

.container-card {
  transform: rotateY(180deg);
  position: relative;
}

.front.back, img {
  width: 100%;
  height: 295px;
  background: #fff;
  border-radius: 15px;
}

.img-nipe {
  padding: 15px 6px;
  background: #fff;
  border-radius: 15px;
}

.front {
  z-index: 2;
}

.face {
  width: 100%;
  height: 100%;
  position: absolute;
}
.container:hover .face{
  transform: rotateY(180deg);
  transition: transform 3s ease-in;
}


.container:hover .face.back{
  transform: rotateY(180deg);
  transition: transform 4s ease-in;
}

.container:hover .face.front{
  transform: rotateY(90deg);
  transition: transform 3s ease-in;
}

.Toggle {
        /** Otras  propiedades **/
	position: absolute;
        top: 1px;
        left: 2px; /**Al comienzo se ubica a la izquierda**/
	transition: transform 100ms linear; /** Defino la animación **/
}

.Checkbox:checked ~ .Toggle {
	transform: translateX(48px);   /** Mover el elemento a la derecha **/
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Box</title>
</head>
<body>
    <style>
        .Container {
           background: PapayaWhip;
           width: 400px;
           height: 100px;
           display: flex;
           justify-content: space-between;
           margin: 30px;
        }

        .Container:hover .box {
            transform: rotateY(50deg); 
        }

        .box {
           background: PapayaWhip;
           width: 100px;
           height: 100px;
           
        }

        .box1 {
           background: LightSalmon;
           transition: 500ms;
        }

        .box2 {
           background: Salmon;
           transition: transform 2s;
        }

        .box3 {
           background: LightCoral;
           transition: transform 3s;
        }
    </style>
</body>
 <div class="Container">
     <div class=" box box1 "></div>
     <div class=" box box2 "></div>
     <div class=" box box3 "></div>
 </div>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Box</title>
</head>
<body>
    <style>
        .Container {
           background: PapayaWhip;
           width: 400px;
           height: 100px;
           display: flex;
           justify-content: space-between;
           margin: 30px;
        }

        .Container:hover .box {
            transform: scale(1.5);
        }

        .box {
           background: PapayaWhip;
           width: 100px;
           height: 100px;
           
        }

        .box1 {
           background: LightSalmon;
           transition: 500ms;
        }

        .box2 {
           background: Salmon;
           transition: transform 2s;
        }

        .box3 {
           background: LightCoral;
           transition: transform 3s;
        }
    </style>
</body>
 <div class="Container">
     <div class=" box box1 "></div>
     <div class=" box box2 "></div>
     <div class=" box box3 "></div>
 </div>
</html>

// Hoy 20/10/2023 ya no se tiene que poner la propiedad:
transition: transform 500ms;

// Ya te permite 
transition-duration: 500ms;

y te lo da por defecto VSC por si a alguien le sirve, funciona igual.

Comentarios

Carlos Eduardo Gomez García#2590184

!Transition no animated

A tener esto:

!Transition animated

Sí, así de fácil :D

Sebastian Heredia#2591231

Conclusión

A la profe le encanta este color :)

background: papayawhip;

Irving Juárez#2625386

Cuando tu quieras que se le aplique transiciones a solo dos propiedades, puedes hacerlo solo con una coma. Veamos el siguiente ejemplo: .

transition-property: transform, border-radius;

Ya con eso, ya no tenemos que poner el valor all. . Aqui mi ejercicio

Rigoberto Maldonado#3064765

Que tal, buen dia campeon.. mi resultado.

<div class="container">
        <div class="container-card">
          <div class="face front"><img src="./images/face.png" alt=""></div>
          <div class="face back"><img src="./images/as.png" alt=""></div>
        </div>
        <div class="container-card">
          <div class="face front"><img src="./images/face.png" alt=""></div>
          <div class="face back"><img class="img-nipe" src="./images/kk.png" alt=""></div>
        </div>
        <div class="container-card">
          <div class="face front"><img src="./images/face.png" alt=""></div>
          <div class="face back"><img class="img-nipe" src="./images/jj.png" alt=""></div>
        </div>
      </div>

<div class="container">
        <div class="container-card">
          <div class="face front"><img src="./images/face.png" alt=""></div>
          <div class="face back"><img src="./images/as.png" alt=""></div>
        </div>
        <div class="container-card">
          <div class="face front"><img src="./images/face.png" alt=""></div>
          <div class="face back"><img class="img-nipe" src="./images/kk.png" alt=""></div>
        </div>
        <div class="container-card">
          <div class="face front"><img src="./images/face.png" alt=""></div>
          <div class="face back"><img class="img-nipe" src="./images/jj.png" alt=""></div>
        </div>
      </div>

.container {
  display: grid;
  grid-template-columns: repeat(3, minmax(100px, 200px));
  grid-gap: 10px;
  border: 1px solid #ccc;
  width: 100%;
  height: 60vh;
  align-items: center;
  place-content: center;
  cursor: pointer;
  background: #f2f2f2;
  padding-bottom: 22%;
  background-image: url(../images/table.png);
  background-repeat: no-repeat;
  background-size: cover;

}

.container-card {
  transform: rotateY(180deg);
  position: relative;
}

.front.back, img {
  width: 100%;
  height: 295px;
  background: #fff;
  border-radius: 15px;
}

.img-nipe {
  padding: 15px 6px;
  background: #fff;
  border-radius: 15px;
}

.front {
  z-index: 2;
}

.face {
  width: 100%;
  height: 100%;
  position: absolute;
}
.container:hover .face{
  transform: rotateY(180deg);
  transition: transform 3s ease-in;
}


.container:hover .face.back{
  transform: rotateY(180deg);
  transition: transform 4s ease-in;
}

.container:hover .face.front{
  transform: rotateY(90deg);
  transition: transform 3s ease-in;
}

.Toggle {
        /** Otras  propiedades **/
	position: absolute;
        top: 1px;
        left: 2px; /**Al comienzo se ubica a la izquierda**/
	transition: transform 100ms linear; /** Defino la animación **/
}

.Checkbox:checked ~ .Toggle {
	transform: translateX(48px);   /** Mover el elemento a la derecha **/
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Box</title>
</head>
<body>
    <style>
        .Container {
           background: PapayaWhip;
           width: 400px;
           height: 100px;
           display: flex;
           justify-content: space-between;
           margin: 30px;
        }

        .Container:hover .box {
            transform: rotateY(50deg); 
        }

        .box {
           background: PapayaWhip;
           width: 100px;
           height: 100px;
           
        }

        .box1 {
           background: LightSalmon;
           transition: 500ms;
        }

        .box2 {
           background: Salmon;
           transition: transform 2s;
        }

        .box3 {
           background: LightCoral;
           transition: transform 3s;
        }
    </style>
</body>
 <div class="Container">
     <div class=" box box1 "></div>
     <div class=" box box2 "></div>
     <div class=" box box3 "></div>
 </div>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Box</title>
</head>
<body>
    <style>
        .Container {
           background: PapayaWhip;
           width: 400px;
           height: 100px;
           display: flex;
           justify-content: space-between;
           margin: 30px;
        }

        .Container:hover .box {
            transform: scale(1.5);
        }

        .box {
           background: PapayaWhip;
           width: 100px;
           height: 100px;
           
        }

        .box1 {
           background: LightSalmon;
           transition: 500ms;
        }

        .box2 {
           background: Salmon;
           transition: transform 2s;
        }

        .box3 {
           background: LightCoral;
           transition: transform 3s;
        }
    </style>
</body>
 <div class="Container">
     <div class=" box box1 "></div>
     <div class=" box box2 "></div>
     <div class=" box box3 "></div>
 </div>
</html>

// Hoy 20/10/2023 ya no se tiene que poner la propiedad:
transition: transform 500ms;

// Ya te permite 
transition-duration: 500ms;

y te lo da por defecto VSC por si a alguien le sirve, funciona igual.

Jean Paul Yepes#3142618

Con lo que hemos visto podemos hacer un toggle animado. Aquí va cómo podrías hacerlo 👇 .

Paso 1 - Estructura

Crea un contenedor que tenga adentro: un checkbox y un div que será nuestro toggle que se moverá

<div class="Container">
	<input type="Checkbox" name="" id="" class="Checkbox">
        <div class="Toggle"></div>
</div>

Para este momento solo deberás ver el checkbox

Paso 2 - Estilos

Aplica los estilos para que se vea como un toggle. En este caso solo deberás agregar las esquinas redondeadas y hacer que el checkbox ocupe todo el espacio disponible (para que el usuario pueda darle click en cualquier lugar del contenedor). Si todavía no hemos escondido el checkbox se deberá ver así

Paso 3 - Esconder el checkbox

Ahora hay varias maneras de esconder el checkbox. La que voy a elegir va a ser la de poner opacity: 0 para esconder el checkbox

Paso 4 - Animar el toggle

Ahora si se viene lo chido 👏 los checkboxes tienen la pseudo-clase :checked por lo cual lo utilizaré como trigger para disparar la animación. Así que para animar el toggle lo único que tengo que hacer es mover nuestro elemento Toggle a la derecha unos 48px ya que eso es el ancho del contendor. Para eso aplico las siguientes propiedades:

.Toggle {
        /** Otras  propiedades **/
	position: absolute;
        top: 1px;
        left: 2px; /**Al comienzo se ubica a la izquierda**/
	transition: transform 100ms linear; /** Defino la animación **/
}

.Checkbox:checked ~ .Toggle {
	transform: translateX(48px);   /** Mover el elemento a la derecha **/
}

transition para definir cuanto va a durar la animación y la aceleración de la animación
transformpara mover el elemento a la derecha

Fin

Y eso es todo amiguitos 🐇 Para ver este proyecto en acción pueden verlo en este Codepen si tienes problemas para posicionar los elementos. Y ver esta animación en acción.

Comentarios (50)50 comentarios

Carlos Eduardo Gomez García

Hace 5 años

Ana Rotela Cabrera

Hace 4 años

Tus gráficas son excelentes 👌 siempre muy didácticas y facilitan el aprendizaje en cada clase

Daniel Cruz

Es agradable ver este tipo de material en los comentarios y no adulaciones o memes! Muchas gracias por el tiempo que le dedicas a crear y compartir tan valioso material.

Sebastian Heredia

Patrick Jeremy Rodriguez Sandoval

Definitivamente amigo, definitivamente.

Cristian Blandon

Y el hotpink también :joy:

Irving Juárez

Excelente explicación 👌

Rigoberto Maldonado

Platzi Team

Geniaal !!!

Jose Ever Muñoz Muñoz

Hace 3 años

envidio tu creatividad!

Carlos Mazzaroli

🍿Transition property y duration

❤Que hace transition-property

Se usa para definir los nombres de las propiedades CSS en las que el efecto de la transición debe aplicarse.

🧡Que es 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.

💛Lecturas Recomendadas

Documentación transition
Documentación transition-property
Documentación transition-duration

Tus aportes deberían estar en los apuntes del curso son geniales 🌟

Andres Alvarez Becerra

Hola, solo para agregar algunas cositas.

++Transition:++ Esta propiedad nos ayuda a tener un mejor control sobre las transformaciones que tenemos. Tambien nos podemos ayudar de 4 propiedades que derivan de esta.

++transition-property:++ Aquí colocamos las propiedades de CSS a las que les aplicaremos la transición.
++transition-duration:++ Aquí especificamos la duración de esa transición.
- Es importante tener en cuenta que se puede crear una duración para cada propiedad o una duración par para todas las propiedades.
++transition-timing-funtion:++ Aquí va una función que sirve para calcular valores intermedios de esas propiedades, básicamente es para ver como queremos esa transición.
- Aquí encuentras algunas funciones: https://easings.net/
++transition-delay:++ Acá se define el tiempo de espera para que comience a cambiar la propiedad.
- por ejemplo: si hago una transformación cuando hago ++Hover++ en algo, y coloco el valor de 2s para esta propiedad, lo que va a suceder es que apenas haga ++Hover++ la transición va a comenzar a los 2s

y por ultimo, hay un atajo para esta propiedad en general y es la siguiente:

transition: <property> <duration> <timing-funtion> <delay>

ejemplo: 

transition: all 2s ease-in 1s

muy buena explicación

Ricardo Rito Anguiano

OMG esto es hermoso, algo me dice que terminare haciendo juegos con css y js 😂

Ivan Daniel Cuevas

En este Link esta la lista de propiedades que son animables. 👍

Eliezer Hernandez

Gracias, buen aporte.

Excelente aporte, muchas gracias

Jean Paul Yepes

Anderson Vergara Ruiz

El efecto parallax explicado por su creador

https://youtu.be/86zPz3J4MdM

LESTHER XITUMUL MANUEL

Creo que esto va mejor en la clase anterior jsjs

Isaac Hernandez Resendiz

Aquí les dejo lo que hice para el reto : ![](

Puedes ver mis ejemplos por ti mismo aquí 💚😎

Laura Camila Pregonero

In this code use Tranform: rotateY(50deg) 🥰❤🌝

🌸🌸🌸🌸🌸🌸🌸🌸🌸🌸🌸🌸🌸🌸🌸🌸🌸🌸🌸🌸🌸🌸🌸🌸🌸🌸🌸🌸🌸🌸🌸🌸🌸🌸🌸🌸🌸🌸🌸

⛅⛅⛅

In this code use Transform: scale(1.5); 🥰❤🌝

Jazziel Horacio Puente Verdugo

Solo se le puede hacer transition a dos propiedades al mismo tiempo, ejemplo:

si tengo un botón que quiero cambiar el background-color y color al hacer hover con una transition se puede? O solo es a una propiedad?

Christopher Andrés Guano Valencia

Claro! Puedes utilizar transition-property: all; que le estás diciendo que todas las propiedades que cambian tengan la transición.

Y si quieres agregar la duración a la transición es: transition: all 2s; y asi sucesivamente. Recuerda que la transición en una sola línea es: transition: <property> <duration> <timing-function> <deley>;

Mil gracias, eres el mejor.

Héctor Corvalán

Muy poco contraste en los colores, malo el ejemplo

Fabian Flores

Notas de la clase

Jonathan Andres Vasquez Valle

Me encanta, es como el principio para animar con css!

Carolina Forner

No se si me saltee alguna clase, pero me quedo la pagina de Alicia a medias :´) para que eran las cards?

Julian Franco

¿Tengo una pregunta, puedo hacer un transition de un item de un punto A a un punto B con la pseudoclase hover?

Sin embargo como haria para que ese item se quede en el punto B ? Desplanzando los elementos adjayacentes.

Esto se podria con transition o debería hacer uso de JS ?

Kevin Correa

Para eso tendrías que usar animation o JS como tu dices

Luis Fernando Montoya Garcia

Fabián Andrés Pacherres Bautista

ese .box1 .box2 .box3 se pudo hacer mejor con :nth-child()

Recursos

Resumen

Transiciones CSS: Transition Property y Transition Duration

Transiciones CSS: Transition Property y Transition Duration

Transiciones CSS: Transition Property y Transition Duration

Progreso del curso

Importancia de las animaciones web

Conceptos iniciales

Transformaciones en 2D y 3D

Parallax con transformaciones

Transiciones

Tips de UX

Rendimiento y accesibilidad

Libros recomendados y próximos pasos

Transiciones CSS: Transition Property y Transition Duration

Transiciones CSS: Transition Property y Transition Duration

Recursos

Resumen

Propiedades obligatorias para una transición

Comentarios

Conclusión

Recursos

Resumen

Propiedades obligatorias para una transición

Comentarios

Conclusión

🍿Transition property y duration

❤Que hace transition-property

🧡Que es transition-duration

💛Lecturas Recomendadas

Paso 1 - Estructura

Paso 2 - Estilos

Paso 3 - Esconder el checkbox

Paso 4 - Animar el toggle

Fin