A煤n no tienes acceso a esta clase

Crea una cuenta y contin煤a viendo este curso

Transition timing function y delay

13/20
Recursos

Aportes 28

Preguntas 3

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad? Crea una cuenta 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?

.

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

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

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.

A todos nos puede traicionar el subconsciente 馃槀

que viva el six

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

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

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

circle s3x 馃槼, hubo un lapsus xd

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

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

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

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;

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)

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