Transition timing function y delay

A todos nos puede traicionar el subconsciente 😂

practicando un poco
https://codepen.io/camilo315853/pen/KKWQyye?editors=0100

HTML

<div class="container">
<div class="circle one"></div>
<div class="circle two"></div>
<div class="circle three"></div>
<div class="circle four"></div>
<div class="circle five"></div>
<div class="circle six"></div>
</div>

CSS

body {
  background:
linear-gradient(27deg, #151515 5px, transparent 5px) 0 5px,
linear-gradient(207deg, #151515 5px, transparent 5px) 10px 0px,
linear-gradient(27deg, #222 5px, transparent 5px) 0px 10px,
linear-gradient(207deg, #222 5px, transparent 5px) 10px 5px,
linear-gradient(90deg, #1b1b1b 10px, transparent 10px),
linear-gradient(#1d1d1d 25%, #1a1a1a 25%, #1a1a1a 50%, transparent 50%, transparent 75%, #242424 75%, #242424);
background-color: #131313;
background-size: 20px 20px;
}

.container {
  margin: 20px 40px;
  
  
}
.container:hover .circle {
  transform: translateX(350px);

}

.circle {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  margin-bottom: 12px;
  box-shadow: 0px 0px 30px 0px rgba(30,255,0,0.6), inset 0px 0px 18px 12px rgba(30,255,0,0.6);
  transform: scale(.8);
}
.one {
  
  transition: transform 1.5s linear;
  transition-delay: 0.5s;
  
}

.two {
  transition: transform 1s ease;
  transition-delay: 1s;
}
.three {
  
  transition: transform 2s ease-out;
  transition-delay: 0.5s;
}
.four {
 
  transition: transform 2s ease-out;
  transition-delay: 0.5s;
}
.five {
 
  transition: transform 1s ease;
  transition-delay: 1s;
}
.six {

  transition: transform 1.5s linear;
  transition-delay: 0.5s;
}

Un error lo comete cualquiera 😃 Dejémoslo corregido en nuestro código -> sex six

Les comparto los ejercicios con transiciones.
https://codepen.io/davidosorio/pen/poepaqa

que viva el six

Seis en inglés es “six” no “sex”

Yo hice la representacion de unos bits moviendose de un punto A a un ounto B. La velocidad en la que se mueven es la latencia de la velocidad del internet
.

.
El primero es 1 segundo
El segundo es 0.8 segundos
El tercero es 1.2 segundos
El ultimo son 3 segundos

Hola, este es mi aporte sobre esta clase. Hay ciertos eventos que ocurren a lo largo de nuestras transiciones que podemos usar a nuestro favor con JavaScript y son los siguientes:

• transitionend :
  Este evento sucede cuanto una transición ha terminado. Hay que tener en cuenta que si una transición se elimina antes de completarse, este evento no se genera.
  Otro caso importante, es que tampoco se va activar si no tenemos transition-delay o transition-duration o cuando sus valores son de 0s (cero segundos).

• transitionstart:
  Este evento sucede cuando la transición ha comenzado después del tiempo que se determino en transition-delay.

• transitionrun:
  Este evento sucede cuando se crea por primera vez una transición y antes de que comience cualquier transition-delay

1. NOTA:
La diferencia entre transitionrun y transitionstart es que la primera ocurre antes del tiempo determinado en transition-delay y la segunda ocurre cuando la animación ha comenzado, o sea, después del transition-delay

• transitioncancel:
  Y este evento sucede cuando se cancela una transición. esto puede suceder cuando no dejamos que ocurra transition-delay y transition-duration

2. NOTA:
transition-delay es el tiempo en que demora en comenzar nuestro transición.

https://codepen.io/123porshumway/pen/xxqXWwV?editors=1100

Se pueden poner valores negativos en las aceleraciones, los contenedores primero se moverán hacia atrás como tomando impulso, es muy divertido.
Inténtenlo…
cubic-bezier(1,-0.71,1,-0.71)

Social media badges 👉 demo

circle s3x 😳, hubo un lapsus xd

talvez para algunos no le haya quedado claro todo lo relacionado a perspectivas y ejes así que les dejo este recurso de codepen que les ayudara a entender mejor todo lo relacionado a perspectiva ya que un objeto al rotar en algunos de los 3 ejes tiene resultados que les podría ayudar a hacer pequeños juegos de perspectiva muy curiosos para algunos proyectos espero les ayude como a mi

https://codepen.io/enxaneta/details/ZQbNMx

Se ve lenta la animación por el gif, no sé cómo mejorar la calidad de un gif 😩

Me gusto en la clase div class=“circle sex” /div

.sex o .six

🍿Transition timing function y delay

❤transition-timing-function

Establece cómo se calculan los valores intermedios para las propiedades de CSS que se ven afectadas por un efecto de transición. Básicamente es como nosotros afectamos la aceleración de una transición.
Documentación

🧡transition-delay

Es el tiempo de espera, antes de que comience una animación
Documentación

Que hermosa claseee, me encanto el resultado ❤️

alguien más vio el mensaje subliminal estilo disney 😅🥴

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

En la misma propiedad de transition se pueden colocar todas sus propiedades y no importa el orden en la que estas sean escritas excepto por una cosa. La duración de la transición se debe colocar antes del delay. Fuera de esto, el orden no importa 😊

transition-timing-function

Establece cómo se calculan los valores intermedios para las propiedades de CSS que se ven afectadas por un efecto de transición.

Basicamente es como nosotros afectamos la aceleracion de una transicion.

transition-timing-function: linear | ease | ease-in | ease-out |
ease-in-out | step-start | step-end | steps(int, start | end) | cubicbezier(n, n, n, n) | initial | inherit;

transition-delay

El tiempo puede estar dado en segundos (s) o milisegundos(ms)

transition-delay: time | initial | inherit;

3:22 eso fue un lapsus 🧐

Con esto se puede hacer grandes efectos, genial 😄

Transition timing function y delay, ¡hecho!
aquí el codepen

Me encanta que basicamente nos esta dando los principales apuntes y podemos enfocarnos en la clase y no en pausar para apuntar 💚

😉https://easings.net/

Comparto CodePen donde he ido agragando todos los ejercicios de la clase, incluido este
https://codepen.io/Londrack/pen/vYxPNQX

súper!!!, me encanta esta clase