A煤n no tienes acceso a esta clase

Crea una cuenta y contin煤a viendo este curso

Transition property y duration

12/20
Recursos

Aportes 35

Preguntas 3

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesi贸n.

隆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

鉂ue 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

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.

  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.

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?

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=鈥渆s鈥>
<head>
<meta charset=鈥淯TF-8鈥>
<meta http-equiv=鈥淴-UA-Compatible鈥 content=鈥淚E=edge鈥>
<meta name=鈥渧iewport鈥 content=鈥渨idth=device-width, initial-scale=1.0鈥>
<title>Document</title>
<link rel=鈥渟tylesheet鈥 href="./transitionPropertyDuration.css">
</head>
<body>
<div class=鈥渃ontainer鈥>
<div class=鈥渂ox box1鈥></div>
<div class=鈥渂ox box2鈥></div>
<div class=鈥渂ox 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;