A todos nos puede traicionar el subconsciente 😂
Importancia de las animaciones web
5 razones para usar animaciones en la web
Conceptos iniciales
Propiedades para crear animaciones con CSS y propiedades animables
Pseudo-clases y pseudo-elementos en las animaciones
Timing functions, planos y ejes
Transformaciones en 2D y 3D
Transform translate
Transform rotate, scale, skew y matrix
Transform origin
Transform style y perspective
Backface visibility
Parallax con transformaciones
Efecto parallax: estructura HTML
Efecto parallax: estilos CSS
Transiciones
Transition property y duration
Transition timing function y delay
Tips de UX
Movimiento impulsado por la acción
Tiempos de espera
Problemas de parpadeo
Rendimiento y accesibilidad
Propiedades recomendadas y no recomendadas para animar
Aceleración de hardware y la propiedad will-change
Preferencias de movimiento reducido
Libros recomendados y próximos pasos
Continúa en el Curso de Animaciones con CSS
No tienes acceso a esta clase
¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera
No se trata de lo que quieres comprar, sino de quién quieres ser. Aprovecha el precio especial.
Antes: $249
Paga en 4 cuotas sin intereses
Termina en:
Estefany Aguilar
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.transition-timing-function
: propiedad que establece una timing function para especificar una forma de aceleración de la transición.
transition-delay
: propiedad que establece un intervalo de tiempo desde la acción que desencadena la animación hasta su inicio.
Contribución creada por Andrés Guano.
Aportes 31
Preguntas 4
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
2. NOTA:
transition-delay es el tiempo en que demora en comenzar nuestro transición.
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
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
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
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 😅🥴
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 😊
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;
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 💚
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
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?