Breaking

Post Top Ad

Your Ad Spot

jueves, 24 de septiembre de 2020

Transiciones y transformaciones CSS

 


Como hemos visto en los tutoriales recientes sobre CSS, se pueden crear muchos efectos visuales agradables en sus páginas web completamente en CSS sin necesidad de gráficos o JavaScript. En este tutorial veremos las capacidades de animación integradas en CSS3 para crear efectos que solo eran posibles con tecnologías como Flash en el pasado. Podemos comenzar mirando las transiciones CSS que facilitan la realización de cambios en un estilo sin problemas con el tiempo. A continuación, echaremos un vistazo a Transformaciones. Las transformaciones CSS pueden hacer cosas como sesgar, rotar, escalar y colocar elementos. Al combinar Transiciones y Transformaciones, son posibles algunos efectos de animación interesantes.


Transiciones en CSS3

El efecto que proporcionan las transiciones es muy parecido al que se ve con jQuery. Por ejemplo, si pasa el mouse sobre un enlace en particular en una página web y el color de fondo cambia gradualmente de azul a verde mientras actúa muy hábilmente con varios tonos que aparecen durante el cambio, eso se puede hacer con una transición CSS. Las transiciones hacen cambios que de otra manera serían muy repentinos y abruptos para ser suaves y hábiles. Cuando se usan con moderación, las transiciones pueden agregar un toque agradable a las páginas web.


Propiedad de transición y duración de la transición

Veamos un ejemplo de cómo poner en uso las propiedades transition-propertytransition-durationLa propiedad de transición toma el nombre de la propiedad CSS a la que desea realizar la transición o agregar un efecto. En el siguiente ejemplo, estamos agregando una transición a la propiedad background-color .

La propiedad de duración de la transición define cuánto tiempo tardará en completarse la transición. En el siguiente ejemplo, lo configuramos en 1 segundo.


Desplácese sobre el elemento Super para ver la transición del color de fondo en acción.


Funciones de temporización de transición

Una vez que haya aplicado las propiedades transition-propertytransition-durationpara usar en un elemento, puede personalizar aún más el comportamiento de la transición utilizando la propiedad de función de tiempo de transición . Esta propiedad se utiliza para definir cómo se calculan los valores intermedios de las propiedades CSS que se están transfiriendo. Los valores que acepta la propiedad de función de tiempo de transición son los siguientes.

  • facilidad Aplica un efecto de transición que comienza lentamente, se acelera y luego termina lentamente. Es el valor predeterminado.
  • easy-out Aplica un efecto de transición que tiene un final lento.
  • easy-in-out Aplica un efecto de transición que tiene un inicio y un final lentos.
  • lineal Tiene un efecto constante de principio a fin. Se siente un poco robótico.
  • easy-in Comienza lentamente al principio, luego acelera.
  • pasos Este valor interesante divide la transición en un número determinado de pasos.
  • step-start Cambia el estado en un gran paso, justo al comienzo del temporizador de duración.
  • step-end Cambia el estado en un paso, justo al final del temporizador de duración.

Podemos ver estos diferentes valores en acción aquí. Tenemos ocho cajas diferentes y cada una obtiene un valor diferente para la propiedad de función de tiempo de transición .

Desplácese sobre el contenedor para ver la transición de ancho con diferentes valores de función de tiempo de transición en acción.

paso a paso

facilitar

Facilitarse

facilidad de entrada

lineal

facilidad en

pasos (3, fin)

escalón


Agregar más propiedades de transición

Puede agregar más de una propiedad CSS como valor a la propiedad de transición , lo que le permite crear animaciones más sofisticadas. Por ejemplo, vamos a tomar nuestro enlace inicial que pasó de azul a verde, y podemos agregar la border-radiuspropiedad a nuestra transición. En el fragmento a continuación, puede ver que ahora tenemos una segunda propiedad CSS agregada a la propiedad de transición . Tenga en cuenta que la duración de la transición ahora también tiene un segundo valor de tiempo. Esto significa que puede cambiar el tiempo que tarda cada transición de forma independiente. Para nuestros propósitos, la transición del color de fondo ocurre en un segundo y la transición del radio del borde ocurre en tres segundos.

Pase el ratón sobre el elemento de Super para ver la transición de fondo color y la transición de la frontera de radio en acción.


¡Eso es bastante estupendo! Ahora llevemos esa idea un poco más lejos. Podemos usar la transición de un radio de borde para convertir un cuadrado en un círculo. Además, también aplicaremos una transición al espaciado entre letras y al color de la fuente. Podemos crear un cuadrado perfecto con un centro horizontal y vertical usando Flexbox, luego agregamos nuestras transiciones.

Coloca el cursor sobre el cuadrado para convertirlo en un círculo.

Circleify


Quizás prefieras ver un círculo transformarse en un cuadrado. Para hacer eso, simplemente configure el radio de borde para comenzar en 50% y luego haga la transición a radio sin borde.

Coloca el cursor sobre el círculo para convertirlo en un cuadrado.

Squareify


Este divertido efecto puede agregar un borde interior a un elemento a través de una caja de sombra.

Coloca el cursor sobre el rectángulo para agregar un borde interior.

Efecto de borde interior a través de Box Shadow


Puede seguir acumulando estas propiedades de transición si lo desea. En este, agregaremos una transición a la sombra del cuadro, el color de fondo, el color y el espaciado entre letras del elemento. Tiene un efecto estupendo.

Desplácese sobre el elemento para ver cuatro propiedades en transición.

¡Cuatro transiciones de propiedad!


Creación de un efecto de pulsación de botón

Podemos usar todas las técnicas que hemos aprendido hasta ahora para crear algunos efectos geniales de botones en un menú de caja flexible.

html

css


Desplácese sobre un elemento del menú, luego haga clic y mantenga presionado para obtener el efecto de "presionar un botón". La acción de hacer clic y mantener presionado da la impresión de que un botón se presiona hacia abajo cuando se presiona.


Transformaciones CSS

La primera sección discutió las transiciones CSS y el hecho de que son la forma más sencilla de agregar un efecto de suavizado en los elementos a medida que cambian entre dos estados. Ahora podemos echar un vistazo a las transformaciones CSS, que son el siguiente nivel de potencia en las tecnologías de animaciones CSS. CSS Transforms puede transformar los elementos de su página web en todo tipo de formas divertidas e interesantes. Podemos hacer cosas como estirar un elemento, cambiar las coordenadas de un elemento, rotar elementos y más.

¡La transformpropiedad CSS es fantástica! Puede aceptar una gran cantidad de valores para modificar el espacio de coordenadas del modelo de formato visual CSS. Aquí está la lista de valores que puede usar con la propiedad transform .

  • rotate () Gira un elemento de página alrededor de un punto fijo en el plano 2D.
  • rotateX () Gira un elemento de página alrededor de la abscisa (eje horizontal).
  • rotateY () Gira un elemento de página alrededor de la ordenada (eje vertical).
  • rotateZ () Gira un elemento de página alrededor del eje z.
  • rotate3d () Gira un elemento de página alrededor de un eje fijo en el espacio 3D.
  • translate () Cambia la posición de los elementos en las direcciones horizontal y / o vertical.
  • translateX () Cambia la posición de un elemento horizontalmente en el plano 2D.
  • translateY () Cambia la posición de un elemento verticalmente en el plano 2D.
  • scale () Cambia el tamaño del elemento.
  • scaleX () Cambia el tamaño del elemento horizontalmente.
  • scaleY () Cambia el tamaño del elemento verticalmente.
  • skew () Da un efecto de inclinación al elemento.
  • skewX () Inclina el elemento horizontalmente.
  • skewY () Inclina el elemento verticalmente.

Ahora que sabemos lo que se puede hacer con todos los diferentes valores de transform, veamos un montón de ejemplos. Podemos empezar con una simple nube.

solo una bonita nube


translateX ()

La función de CSS translateX () cambia la posición de un elemento horizontalmente en el plano 2D. Eso significa que podemos mover nuestra nube hacia la derecha un poco así.

ejemplo de transform translateX


scaleX ()

La función CSS scaleX () cambia el tamaño de un elemento a lo largo del eje x, que es horizontal. Eso significa que podemos hacer que nuestra nube sea dos veces más grande aquí horizontalmente.

css transformar scaleX


escala()

La función scale () puede aceptar más de un valor. El segundo valor en este ejemplo también se escala en el eje y. Entonces, esta nube se escalará horizontal y verticalmente.

traducir los valores xey de la escala


girar()

Podemos rotar elementos en la página con la función CSS rotate () . Esta función gira un elemento alrededor de un punto fijo en el plano 2D. Veamos algunos ejemplos.

Se utilizan dos imágenes para dar un buen efecto con la función rotate () . La primera imagen tiene una opacidad menor para mostrar la posición original frente a la posición transformada .

css transform rotate 2 efecto de imagen


origen de transformación

Cuando usamos la función rotate () con la propiedad transform , también podemos usar transform-originpara cambiar la posición de los elementos transformados. En otras palabras, podemos especificar la ubicación del pivote en la que gira el elemento. El valor de transform-originpuede ser medidas de longitud, palabras clave o valores porcentuales. El primer valor dado es el desplazamiento horizontal mientras que el segundo es el desplazamiento vertical. Si especifica solo un valor, este valor se usa para ambos.

Observe cómo con transform-origin: top center; conjunto, la imagen utiliza esa ubicación para rotar.
ejemplo de centro superior de origen de transformación

Aquí podemos establecer transform-origin: right bottom; para ver cómo eso cambia el efecto.

Ahora obtenemos lo que esperaríamos. La imagen gira fuera del área inferior derecha . ¡Frio!
ejemplo de la parte inferior derecha de origen de transformación

Además de describir el origen de la transformación , puede especificar con coordenadas exactas.

css transformar origen basado en píxeles


traducir()

La función de CSS translate () cambia la posición de un elemento en la dirección horizontal, y la dirección vertical si lo desea. Si solo necesita cambiar la posición horizontal o verticalmente, puede usar translateX () o translateY () .

¡Qué hermosa mariposa!
css transform traducir dos valores


La función translate () también puede aceptar valores negativos para efectos interesantes.

css transform traducir valores negativos


Aquí usamos nuevamente la función scale () para hacer una imagen nítida en un efecto de imagen.

escala de transformación css 75


Este uso de scale () crea un bonito efecto de llamada usando una imagen.

transformar escala impresionante


Sesgos

Los distintos valores de sesgo de skew () , skewX () y skewY () se utilizan para cambiar el ángulo en ambos o en cualquiera de los ejes en un cierto número de grados. Esto crea esos efectos de estilo inclinado.

Este primer ejemplo de skewX () le da un efecto de inclinación a la imagen.