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.

Índice de contenido
  1. Propiedades para crear animaciones con CSS
  2. Propiedades Animables
    1. Planos y ejes
  3. Contexto de apilamiento
  4. Propiedades de Transform
    1. Propiedades que debes aprender:
  5. Herramientas para css
  6. Ejercicios

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.

Nota: La jerarquia de apilar contextos es un sub conjunto de la jerarquía de elementos de HTML, porque solo ciertos elementos crean contexto de apilamiento. Fuente: Mozilla

Propiedades de Transform

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

Transformaciones?️Transiciones?‍♂️Animaciones
transformtransitionanimation
transform-origintransition-propertyanimation-name
transform-styletransition-durationanimation-duration
perspectivetransition-timing-fuction (opcional)animation-timing-fuction (optional)
perspective-origintransition-delay (opcional)animation-delay (opcional)
backface-visibilityanimation-iteration-count (opcional)
untitleanimation-direction (opcional)
untitleanimation-fill-mode (opcional)
untitleanimation-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
TipoTrasladarEscalarRotarInclinarMatrizPerspectiva
Múltipletranslate()scale()rotate()skew()matrix()perspective()
Eje XtranslateX()scaleX()rotateX()skewX()
Eje YtranslateY()scaleY()rotateY()skewY()
Eje ZtranslateZ()scaleZ()rotateZ()
3Dtranslate3d()scale3d()rotate3d()matrix3d()
Te invito a conocer uno de los mejores hosting del mercado
Valores que reciben las transform-fuctions
ValorValor con los argumentos que recibeSe 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
TipoSe puede escribir con
offset-keywordleft, right, top, bottom o center
x-offset<length> o un <percentage>
x-offset-keywordleft, right o center
y-offset<length> o un <percentage>
y-offset-keywordtop, bottom o center
z-offset<length> o un <percentage>

⭐Propiedades transform-style⭐

Sintaxis con 1 valor:

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

valores
TipoValor
2Dflat
3Dpreverse-3d

⭐Propiedad perspective⭐

Sintaxis con 1 valor:

perspective: length | none;

Valores

TipoSe puede escribir con
Keywordnone
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
TipoSe puede escribir con
Eje Xleft, right, center, <length> o un <percentage>
Eje ytop, bottom, center, <length> o un <percentage>

⭐Propiedad backface-visibility⭐

Sintaxis con 1 valor:

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

Valores
TipoSe puede escribir
Visiblevisible
No visiblehidden

Herramientas para css

htmlcolorcodes
noreferrer noopener nofollow
easings.net
noreferrer noopener nofollow
cubic-bezier.com
noreferrer noopener nofollow
Herramienta para obtener gradientes en css
noreferrer noopener nofollow
Caniuse herramienta para saber si todos los navegadores son compatibles con lo que programas en 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

5/5 - (1 voto)

Te podría interesar

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

For security, use of Google's reCAPTCHA service is required which is subject to the Google Privacy Policy and Terms of Use.

Subir