No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Aprende todo un fin de semana sin pagar una suscripci贸n 馃敟

Aprende todo un fin de semana sin pagar una suscripci贸n 馃敟

Reg铆strate

Comienza en:

1D
4H
40M
19S

Transition timing function y delay

13/20
Recursos

Recapitulando, una timing function es la representaci贸n de la progresi贸n en funci贸n del tiempo de cada ciclo de una animaci贸n. Representa la aceleraci贸n del elemento desde un punto A hasta un punto B.

  • linear: El elemento se mueve a una aceleraci贸n constante.
  • ease: Es el valor predeterminado si no se especifica. El elemento acelera inicialmente, pero presenta mucha desaceleraci贸n.
  • ease-in: El elemento empieza lento pero termina r谩pido.
  • ease-out: El elemento empieza r谩pido pero termina lento.
  • ease-in-out: Es la combinaci贸n de ease-in y ease-out. El elemento empieza lento, a medida que avanza va aceler谩ndose, pero termina lento.
  • cubic-bezier: Se necesitan cuatro n煤meros, que representan dos puntos de control para formar la curva de aceleraci贸n deseada.

Propiedades opcionales para una transici贸n

Contribuci贸n creada por Andr茅s Guano.

Aportes 35

Preguntas 4

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

o inicia sesi贸n.

Hice una peque帽a animaci贸n de una Mesa de Pool
utilizando transitions, transform, y todo lo visto hasta ahora.
Link: https://codepen.io/paolojoaquin/pen/WNpEoWP

Me gustar铆a feedback, Gracias 馃槃

min: 6:53 鈥淪ix鈥 馃槒

驴Quien es?

.

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

A todos nos puede traicionar el subconsciente 馃槀

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

que viva el six

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.

Seis en ingl茅s es 鈥渟ix鈥 no 鈥渟ex鈥

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)

circle s3x 馃槼, hubo un lapsus xd

Que rico el div 6 馃槱馃サ馃槒馃槒馃槒馃槒

Me gusto en la clase div class=鈥渃ircle sex鈥 /div

Social media badges 馃憠 demo

Se ve lenta la animaci贸n por el gif, no s茅 c贸mo mejorar la calidad de un gif 馃槱

馃嵖Transition timing function y delay

鉂ransition-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

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 馃槉

.sex o .six

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;
le dije a mi esposa que "me voy a echar un sex" con mi compadre y ya me ando divorciando, gracias Stefanny por confundirme 馃

3:22 eso fue un lapsus 馃

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

Con esto se puede hacer grandes efectos, genial 馃槃

Transition timing function y delay, 隆hecho!
aqu铆 el codepen

Que hermosa claseee, me encanto el resultado 鉂わ笍

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

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

six o sex? lol