Transition property y duration

¡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:

A tener esto:

Sí, así de fácil 😄

Tarde mas en subir el GIF que en hacerlo jajaja.

Conclusión

A la profe le encanta este color 😃

background: papayawhip;

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

🍿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

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.

1. transition-property:
   Aquí colocamos las propiedades de CSS a las que les aplicaremos la transición.

2. 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.

3. 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/

4. 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

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>

.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;
}

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

Listo en Codepen

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

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

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

⛅⛅⛅

<!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>

⛅⛅⛅

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

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

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

⛅⛅⛅

<!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>

⛅⛅⛅

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.

https://cricadev.github.io/Desktop/curso-transform-transition/transition-property/index.html

Completado todos los ejercicios de Transform con Transitions, mejoran mucho al aplicarle las transitions.

Link a el Ejercicio en GitHub

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

Puedes ver mis ejemplos por ti mismo aquí
💚😎

12.-Transition property y duration

Para poder llevarlas acabo tenemos 4 propiedades, pero en esta clase solo nos vamos a centrar en 2 de ellas:

• transition-property: va a animar una propiedad de CSS que ya tenemos establecida, (no todas las propiedades son animables)
• transition-duration: es que tanto va a durar la transición, nos ayuda a ver la animación de manera más detallada.

Al igual que transform, transition puede tomar muchos valores.

All nos sirve para transicionar todas las propiedades de ese elemento. Duration puede tener un valor en milisegundos o segundos.

wowowow sigo aprendiendo muy buena todas las clases!!!

Transiciones

Transiciones

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

transition-property

Nos anima una propiedad de css.

transition-property: none | all | <property> | initial | inherit;

transition-duration

Que tanto durara esa propiedad en transladarse de un lado a otro.

transition-duration: <time> | initial | inherit;

Les comparto la documentación de Mozilla donde se pueden observar las propiedades animables para que no vayan a usar una propiedad no animable y vayan a pensar que se están equivocando en aplacarle la transición.

El efecto parallax explicado por su creador

https://youtu.be/86zPz3J4MdM

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

Aquí mi ejercicio https://codepen.io/jeferson57/pen/oNGVqJq

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

Muy poco contraste en los colores, malo el ejemplo

Código de traslación

<!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>Document</title>
    <style>
        .shadow{
            width: 100px;
            height: 100px;
            background-color: rgb(209, 209, 209);
            border-radius: 50%;
        }
        .circle{
            width: 100px;
            height: 100px;
            background-color: #85FFBD;
            background-image: linear-gradient(45deg, #85FFBD 0%, #FFFB7D 100%);
            border-radius: 50%;
            transition: transform 1s cubic-bezier(.44,.03,.7,.99);
        }
        .circle:hover{
            transform: translate(200px,0px);
        }
    </style>
</head>
<body>
    <div class="shadow">
        <div class="circle"></div>
    </div>
</body>
</html>

Este es mi codigo.

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">
    <link rel="stylesheet" href="./src/styles/transitio-property-duration.css">
    <title>Transition Duration</title>
</head>

<body>
    <div class="container">
        <div class="box box1"></div>
        <div class="box box2"></div>
        <div class="box box3"></div>
    </div>

    <div class="container">
        <div class="rotateBox rbox1"></div>
        <div class="rotateBox rbox2"></div>
        <div class="rotateBox rbox3"></div>
    </div>

    <div class="container">
        <div class="translateBox tBox1"></div>
        <div class="translateBox tBox2"></div>
        <div class="translateBox tBox3"></div>
    </div>

    <div class="container">
        <div class="skewBox sBox1"></div>
        <div class="skewBox sBox2"></div>
        <div class="skewBox sBox3"></div>
    </div>

</body>

</html>

CSS

*{
    overflow-x: hidden;
}

.container{
    background: papayawhip;
    display: flex;
    flex-direction: row;
    width:100% ;
    height: 100%;
    justify-content: space-between;
    margin-top:40px;
}

.container:hover{
    overflow: hidden;
}

.container:hover .box{
    transform: scale(1.2) rotate(45deg);
    transition-delay: 0.2s;
}

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

.box1{
    background: lightcoral;
    transition: transform 500ms;
}

.box2{
    background: salmon;
    transition: transform 900ms;
}

.box3{
    background: darksalmon;
    transition: transform 1100ms;
}

.rotateBox{
    width: 200px;
    height: 150px;
}


.container:hover .rotateBox {
    transform: rotate(180deg);
}

.rbox1{
    background: #334257;
    transition: transform 2000ms;
}

.rbox2{
    background: #476072;
    transition: transform 1000ms;
}

.rbox3{
    background: #548CA8;
    transition: transform 500ms;
}

.translateBox{
    width: 150px;
    height: 200px;
    border-radius: 50%;
    border: 2px solid rgba(40, 115, 158, 0.404);
    box-shadow: 3px 4px 8px 2px black;
}

.container:hover .translateBox{
    perspective: 40%;
    transform: scale(1.5);
}

.tBox1{
    background:rgb(236, 214, 98);
    transition: transform 2000ms;
  
}

.tBox2{
    background:rgb(93, 130, 51);
    transition: transform 2000ms;
}

.tBox3{
    background:rgb(40, 78, 120);
    transition: transform 2000ms;
}


.skewBox{
    width: 200px;
    height: 200px;
    border-radius: 20%;
}

.container:hover .skewBox{
    transform: skew(20deg, 40deg);
}
.sBox1{
    background: #CDF0EA;
    transition: transform 200ms;
}

.sBox2{
    background: #BEAEE2;
    transition: transform 200ms;
}

.sBox3{
    background: #F7DBF0;
    transition: transform 200ms;
}

Oye, no habia visto esa manera de ver el hover como un condicional. ¡Me gusto ese punto de vista!

Me va gustando mucho este pequeño curso por ahora 💚
Puedo hacer cosas increibles :3

wooooooooooooo

Les comparto donde estoy poniendo todos los ejercicios del curso.
https://codepen.io/Londrack/full/vYxPNQX

¿Por qué el comportamiento tan extraño con el transform-origin? Hace como dos movimientos

.container{
                width: 400px;
                height: 100px;
                background: papayawhip;
                display: flex;
                justify-content: space-between;
                margin: 30px;
            }
            .box{
                width: 100px;
                height: 100px;
                background: pink;
            }
            .container:hover .box{
                transform: scale(1.2);
            }
            .box1{
                background: lightcoral;
                transition: transform 500ms;
            }
            .box2{
                background: salmon;
                transition: transform 1s;
            }
            .box3{
                background: darksalmon;
                transition: transform 1.5s;
            }

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

*/Aqui el código en HTML:*/

<!DOCTYPE html>
<html lang=“es”>
<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>Document</title>
<link rel=“stylesheet” href="./transitionPropertyDuration.css">
</head>
<body>
<div class=“container”>
<div class=“box box1”></div>
<div class=“box box2”></div>
<div class=“box box3”></div>
</div>
</body>
</html>

*/y aqui en CSS:/*

.container {
margin: 30px;
width: 400px;
height: 100px;
display: flex;
justify-content: space-between;
background: papayawhip;
}

.container:hover .box {
transform: scale(1.2);
}

.box {
width: 100px;
height: 100px;
}
.box1 {
background: blue;
transition: transform 500ms;
}
.box2 {
background: green;
transition: transform 1s;
}
.box3 {
background: yellow;
transition: transform 1.5s;
}

Notas de la clase

transition-duration: 500ms; = transition: transform 500ms;