BlogCode

8 transiciones simples de CSS3 que sorprenderán a sus usuarios

8 transiciones simples de CSS3 que sorprenderán a sus usuarios.

miniaturaCSS3 introdujo innumerables posibilidades para experiencia de usuario diseñadores, y lo mejor de ellos es que las partes más geniales son muy simples de implementar.

Solo unas pocas líneas de código le darán un gran efecto de transición que entusiasmará a sus usuarios, aumentará el compromiso y, en última instancia, cuando se usa bien, aumentará sus conversiones. Además, estos efectos son acelerados por hardware y una mejora progresiva que puedes usar ahora mismo.

Aquí están 8 efectos realmente simples que te darán vida IU y sonrisas en los rostros de sus usuarios.

Todos estos efectos (primera barra) se controlan con la propiedad de transición. Para poder ver estos efectos en acción, configuraremos un div en un HTML página:

<!DOCTYPE html>
<html>
<head>
 <style type="text/css">
 </style>
</head>
<body>
 <div></div>
</body>
</html>

Una vez que haya hecho eso, configure su ancho y alto (para que tenga dimensiones), su color de fondo (para que podamos verlo) y su propiedad de transición.

<style type="text/css">
body > div
{
 width:483px;
 height:298px;
 background:#676470;
 transition:all 0.3s ease;
}
</style>

La propiedad de transición tiene tres valores: propiedades de transición (en nuestro caso todas) velocidad de transición (en nuestro caso 0.3 segundos) y un tercer valor que le permite cambiar cómo se calculan la aceleración y la desaceleración, pero nos quedaremos con el valor predeterminado y lo dejaremos en blanco.

Ahora todo lo que tenemos que hacer es cambiar las propiedades y se animarán para nosotros…

Si quieres mirar, puedes descargar los archivos de demostración aquí.

1. Fundirse

Hacer que las cosas se desvanezcan es una solicitud bastante común de los clientes. Es una excelente manera de enfatizar la funcionalidad o llamar la atención sobre una llamada a la acción.

Los efectos de fundido se codifican en dos pasos: primero, establecer el estado inicial; a continuación, establezca el cambio, por ejemplo, al pasar el mouse:

.fade
{
 opacity:0.5;
}
.fade:hover
{
 opacity:1;
}

(Asegúrese de establecer la clase de su div en «fade” para ver cómo funciona).

2. cambiar el color

Animar un cambio de color solía ser increíblemente complejo, con todo tipo de matemáticas involucradas en cálculos separados RGB valores y luego recombinándolos. Ahora, configuro la clase del div en «color» y especificamos el color que queremos en nuestro CSS:

.color:hover
{
 background:#53a7ea;
}

3. Crecer & se está encogiendo

Para hacer crecer un elemento, tenía que usar su ancho y alto o relleno. Pero ahora podemos usar CSS3su transformar alargar.

Establezca la clase de su div en «grow’ y luego agrega este código a tu bloque de estilo:

.grow:hover
{
 -webkit-transform: scale(1.3);
 -ms-transform: scale(1.3);
 transform: scale(1.3);
}

Reducir un elemento es tan simple como aumentarlo. Para aumentar un elemento especificamos un valor mayor que 1para disminuirlo, especificamos un valor menor que 1:

.shrink:hover
{
 -webkit-transform: scale(0.8);
 -ms-transform: scale(0.8);
 transform: scale(0.8);
}

4. Rotar los elementos

CSS Las transformaciones tienen varios usos diferentes, y uno de los mejores es transformar la rotación de un elemento. Dale a tu div la clase «rotar’ y agregar lo siguiente a su CSS:

.rotate:hover
{
 -webkit-transform: rotateZ(-30deg);
 -ms-transform: rotateZ(-30deg);
 transform: rotateZ(-30deg);
}

5. Cuadrado con un círculo

Un efecto muy popular en este momento es la transición de un elemento cuadrado a uno redondo y viceversa. Con CSSes un efecto simple de lograr, simplemente cambiamos a radio límite propiedad.

Dale a tu div la clase «círculo” y agrega esto CSS a tus estilos:

.circle:hover
{
 border-radius:50%;
}

6. 3d La sombra

3d Las sombras se desaconsejaron durante aproximadamente un año porque no se consideraban compatibles con el diseño plano, lo cual, por supuesto, es estúpido. Funcionan fantásticamente bien para dar retroalimentación a los usuarios sobre sus interacciones y trabajar con planos o falsos. 3d interfaces

Este efecto se logra agregando una sombra de cuadro y luego moviendo el elemento en el eje x usando transformar y Traducir propiedades para que parezcan crecer fuera de la pantalla.

Dale a tu div la clase «threed» y luego agregue el siguiente código a su CSS:

.threed:hover
{
 box-shadow:
 1px 1px #53a7ea,
 2px 2px #53a7ea,
 3px 3px #53a7ea;
 -webkit-transform: translateX(-3px);
 transform: translateX(-3px);
}

7. Balancearse

No todos los elementos utilizan transición propiedad. También podemos crear animaciones muy complejas utilizando @fotogramas clave, animación y animación-iteración.

En este caso, primero definiremos un CSS animación en tus estilos. Notarás que, debido a problemas de implementación, tenemos que usar @-webkit-keyframes así como @fotogramas clave (sí, Internet Explorer realmente es mejor que Chrome, al menos en este aspecto).

@-webkit-keyframes swing
{
 15%
 {
 -webkit-transform: translateX(5px);
 transform: translateX(5px);
 }
 30%
 {
 -webkit-transform: translateX(-5px);
 transform: translateX(-5px);
 } 
 50%
 {
 -webkit-transform: translateX(3px);
 transform: translateX(3px);
 }
 65%
 {
 -webkit-transform: translateX(-3px);
 transform: translateX(-3px);
 }
 80%
 {
 -webkit-transform: translateX(2px);
 transform: translateX(2px);
 }
 100%
 {
 -webkit-transform: translateX(0);
 transform: translateX(0);
 }
}
@keyframes swing
{
 15%
 {
 -webkit-transform: translateX(5px);
 transform: translateX(5px);
 }
 30%
 {
 -webkit-transform: translateX(-5px);
 transform: translateX(-5px);
 }
 50%
 {
 -webkit-transform: translateX(3px);
 transform: translateX(3px);
 }
 65%
 {
 -webkit-transform: translateX(-3px);
 transform: translateX(-3px);
 }
 80%
 {
 -webkit-transform: translateX(2px);
 transform: translateX(2px);
 }
 100%
 {
 -webkit-transform: translateX(0);
 transform: translateX(0);
 }
}

Esta animación simplemente mueve el elemento de izquierda a derecha, ahora todo lo que tenemos que hacer es aplicarlo:

.swing:hover
{
 -webkit-animation: swing 1s ease;
 animation: swing 1s ease;
 -webkit-animation-iteration-count: 1;
 animation-iteration-count: 1;
}

8. borde entrelazado

Uno de los estilos de botón más populares en este momento es el botón fantasma; un botón sin fondo y con un borde grueso. Por supuesto que podemos agregar un borde a un elemento simple, pero eso cambiará la posición del elemento. Podríamos resolver este problema usando el tamaño del cuadro, pero una solución mucho más simple es hacer la transición a un borde usando una sombra de cuadro insertada.

Dale a tu div la clase «borde’ y agregue lo siguiente CSS a tus estilos:

.border:hover
{
 box-shadow: inset 0 0 0 25px #53a7ea;
}

Imagen destacada/miniatura, imagen de animación a través de Shutterstock.

Sara Vieira

Sara Vieira es una diseñadora y desarrolladora web independiente apasionada por HTML5/​CSS3 y jQuery. Puedes seguirlo más lejos gorjeo o mírala sitio web.

Publicaciones relacionadas

Deja una respuesta

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

Botón volver arriba
Cerrar