Como hacer animaciones de css en WordPress

En esta ocasión traigo un breve resumen directo al grano para poder hacer uso de CSS en animación, ya que al buscar información especifica cuesta un poco conseguirla. Iniciaremos haciendo mención de cuales son las propiedades para crear animaciones con css y después de lo aprendido lo utilizarás en WordPress, no se dejará de conocer las propiedades, los valores que se utilizan y muy importante respetar la sintaxis para que el navegador pueda interpretar.

Propiedades para crear animaciones con CSS

1. Transform: la propiedad más utilizada en css y la que aprenderemos acá.
2. Transition: esta propiedad nos permite ir de un lado A a un lado B
3. Animation: Esta propiedad nos permite ir a un lado haciendo un salto de A hasta B.

Propiedades Animables

Animable: significa que sus propiedades cambian gradualmente durante un periodo de tiempo determinado.

Planos y ejes

Aquí debes tener claro que se hace uso de los tres ejes cartesianos como se conoce de la fisica, debes tener un poco de sentido común para hacerte con ellos aplicando el css.

Contexto de apilamiento

Esta definición de apilamiento no es más que la conceptualización tridimensional de los elementos de HTML a lo largo de un eje Z imaginario y relativo. Un breve ejemplo agregando varios divs con un valor distinto cada uno, se tiene tres divs con Z-index de valor 100, segundo div con valor 50 y el tercero con valor 1, lo que ocurre es que declaras el orden de renderizado de los divs que se van a ver primero y superpuesto uno de tras de otro. Como el primer div tiene un valor 100 estará por encima de los otros dos divs y esto crea un efecto muy guapo y da una impresión en 3D hacia el usuario final que navegue por la web.

Propiedades de Transform

Podemos hacer que los elementos modifiquen su tamaño, hacer que roten, se trasladen y que escalen.

⭐Transformaciones	?️Transiciones	?‍♂️Animaciones
transform	transition	animation
transform-origin	transition-property	animation-name
transform-style	transition-duration	animation-duration
perspective	transition-timing-fuction (opcional)	animation-timing-fuction (optional)
perspective-origin	transition-delay (opcional)	animation-delay (opcional)
backface-visibility		animation-iteration-count (opcional)
untitle		animation-direction (opcional)
untitle		animation-fill-mode (opcional)
untitle		animation-play-state (opcional)

Propiedades que debes aprender:

• transform
• transform-origin
• transform-style
• perspective
• perspective-origin
• backface-visibility

⭐Propiedad - transform⭐

Sintaxis de 1 valor

transform: none | transform-functions | initial | inherit;

Sintaxis con más de 1 valor:

transform: transform-functions transform-functions;

transform-fuctions

Tipo	Trasladar	Escalar	Rotar	Inclinar	Matriz	Perspectiva
Múltiple	translate()	scale()	rotate()	skew()	matrix()	perspective()
Eje X	translateX()	scaleX()	rotateX()	skewX()
Eje Y	translateY()	scaleY()	rotateY()	skewY()
Eje Z	translateZ()	scaleZ()	rotateZ()
3D	translate3d()	scale3d()	rotate3d()		matrix3d()

Valores que reciben las transform-fuctions

Valor	Valor con los argumentos que recibe	Se puede escribir con
traslate()	traslate(x, y)	<length> o un <percentage>
traslateX()	traslateX(x)	<length> o un <percentage>
traslateY()	traslateY(y)	<length> o un <percentage>
traslateZ()	traslateZ(z)	<length> o un <percentage>
traslate3d()	traslate3d(x, y, z)	<length> o un <percentage>
scale()	scale(x, y)	<number>
scaleX()	scaleX(x)	<number>
scaleY()	scaleY(y)	<number>
scaleZ()	scaleZ(z)	<number>
scale3d()	scale3d(x, y, z)	<number>
rotate()	rotate(angle)	<angle> (p.e. -20deg)
rotateX()	rotateX(angle)	<angle> (p.e. 45deg)
rotateY()	rotateY(angle)	<angle> (p.e. -45deg)
rotateZ()	rotateZ(angle)	<angle> (p.e. 20deg)
rotate3d()	rotate3d(x, y, z, angle)	<number> y <angle> (p.e. 45deg)
skew()	skew(x-angle, y-angle)	<angle> (p.e. -90deg)
skewX()	skewX(angle)	<angle> (p.e. 90deg)
skewY()	skewY(angle)	<angle> (p.e. 180deg)
matrix()	matrix(n, n, n, n, n, n)	<number>
matrix3d()	matrix3d(n, n, n, n, n, n, n, n, n, n, n, n, n, n, n)	<number>
perspective()	perspective(n)	<length>

⭐Propiedad transform-origin⭐

Sintaxis con 1 valor:

transform-origin: x-offset | offset-keyword | initial | inherit;

Sintaxis con 2 valores:

transform-origin: x-offset y-offset;
transform-origin: y-offset x-offset-keyword;
transform-origin: x-offset-keyword y-offset;

transform-origin: x-offset-keyword y-offset-keyword;
transform-origin: y-offset-keyword x-offset-keyword;

Sintaxis con 3 valores:

transform-origin: x-offset y-offset z-offset;
transform-origin: y-offset x-offset-keyword z-offset;
transform-origin: x-offset-keyword y-offset z-offset;
transform-origin: x-offset-keyword y-offset-keyword z-offset;
transform-origin: y-offset-keyword x-offset-keyword z-offset;

Valores

Tipo	Se puede escribir con
offset-keyword	left, right, top, bottom o center
x-offset	<length> o un <percentage>
x-offset-keyword	left, right o center
y-offset	<length> o un <percentage>
y-offset-keyword	top, bottom o center
z-offset	<length> o un <percentage>

⭐Propiedades transform-style⭐

Sintaxis con 1 valor:

transform-style: flat | preserve-3d | initial | inherit;

valores

Tipo	Valor
2D	flat
3D	preverse-3d

⭐Propiedad perspective⭐

Sintaxis con 1 valor:

perspective: length | none;

Valores

Tipo	Se puede escribir con
Keyword	none
3D	<length> o un <percentage>

⭐Propiedad perspective origin⭐

Sintaxis con 1 valor:

perspective-origin: x-axis | y-axis | initial | inherit;

Sintaxis con 2 valores:

perspective-origin: x-axis y-axis;

Valores

Tipo	Se puede escribir con
Eje X	left, right, center, <length> o un <percentage>
Eje y	top, bottom, center, <length> o un <percentage>

⭐Propiedad backface-visibility⭐

Sintaxis con 1 valor:

backface-visibility: visible | hidden | initial | inherit;

Valores

Tipo	Se puede escribir
Visible	visible
No visible	hidden

Herramientas para css

Ejercicios

Ahora entra a estos links para que puedas conocer las propiedades de transform

Ejercicio 1

Ejercicio 2 Pseudo clases

Ejercicio 3 Pseudo elementos

Ejercicio 4 Transform translate

Ejercicio 5 Transform scale

Ejercicio 6 Transform skew

Ejercicio 7 Transform rotate

Ejercicio 8 Transform origin

Ejercicio 9 Transform style

Ejercicio 10 Backface visibility

Ejercicio 11 Parallax

Ejercicio 12 Transition duration property

Ejercicio 13 Timing fuction delay

Ejercicio 14 UX impulsado la acción

Ejercicio 15 UX tiempo de espera

Ejercicio 16 Problema de parpadeo

Ejercicio 17 Will change

Ejercicio 18 webkit transform