Share
A medida que CSS3 se desarrolla en la web, trae consigo algunas nuevas e interesantes técnicas de presentación. Hoy, revisaremos los conceptos básicos del uso de transiciones y animaciones CSS3 para agregar una capa adicional de pulido.
Este tutorial incluye un screencast disponible para miembros Tuts + Premium.
Para comenzar, trabajaremos con algunas técnicas básicas: en primer lugar, un simple cambio de color de texto cuando un usuario se desplaza sobre un elemento específico.
a color: # 000; a: hover color: # f00;
Aquí, cambiamos el color del texto a rojo al pasar el cursor. Ahora, con un poco de CSS3, podemos crear un aspecto mucho más suave desvaneciendo gradualmente el color.
a color: # 000; -webkit-transición: facilidad de color 1s; a: hover color: # f00;
Hemos añadido la propiedad css, -webkit-transition. Tenga en cuenta que el prefijo -webkit especifica que esto solo funcionará en los motores Webkit, o Safari y Chrome. Por suerte, otros navegadores modernos también tienen sus propias implementaciones. Una declaración completa que cubra todos los navegadores podría ser similar a la siguiente:
a color: # 000; -webkit-transición: facilidad de color 1s; -moz-transición: color 1s facilidad en; -o-transición: color 1s facilidad en; transición: color 1s facilidad en;
Tenga en cuenta que, para este tutorial, nos centraremos exclusivamente en la implementación del webkit. Después de la declaración de la propiedad, tenemos los valores "color 1s easy-in". Esta es la declaración abreviada; los tres valores representan:
En este caso, realizamos la transición con facilidad, la cual comenzará la transición lentamente y se acelerará hacia la transición..
Otro uso básico de los estados cambiantes es cambiar el fondo de un cuadro de entrada en el foco.
input.ourInputBox: focus -webkit-transition: background-color 0.5s linear; fondo: #CCC;
Esta vez, colocamos la declaración de transición en el estado de desplazamiento, por lo que no estamos agregando clases innecesarias adicionales al CSS. Aplicamos la transición una vez que el cuadro de entrada adquiere enfoque..
Las transiciones de CSS son en realidad relativamente sencillas para agregar a la funcionalidad de desplazamiento existente, y le dan a su sitio un pulido adicional para los navegadores que admiten CSS3.
Para llevar las cosas un paso más allá, también podemos hacer la transición de múltiples propiedades CSS utilizando las versiones a largo plazo de la transición CSS3..
a.thebg color: # 000; fondo: # f00; relleno: 5px; -webkit-border-radius: 5px; -webkit-transition-property: color, fondo; -webkit-transición-duración: 1s, 1s; -webkit-transición-temporización-función: lineal, facilidad de entrada; a.thebg: hover color: # f00; fondo: # 000;
Esta vez, el color del fondo y del texto cambia cuando se desplaza, por lo que podemos orientar ambas propiedades con nuestra transición. Simplemente dividimos la transición: primero tenemos -webkit-transition-property y separamos los diferentes valores con una coma. Así que nos dirigimos a las propiedades de color y fondo, respectivamente.
-webkit-transición-propiedad: color, fondo;
Luego establecemos la duración de la transición usando:
-webkit-transición-duración: 1s, 1s;
Estos están referenciados en el mismo orden que la primera declaración; esta vez, sin embargo, ambos valores se establecen en 1s.
Por último, configuramos la función de temporización y establecemos dos valores diferentes: el primero, lineal, se relaciona con nuestra primera variable declarada: el color; y el segundo se relaciona con la variable de fondo..
Por lo tanto, hemos establecido el color en un cambio lineal en un segundo, y el fondo se suaviza en ese mismo período de tiempo.
Las transiciones de CSS3 comienzan a surgir cuando se combinan con otras nuevas propiedades de CSS.
Puede revisar ejemplos de uso de elementos superpuestos y transiciones en For the Beautiful Web de Andy Clarke.
Vamos a crear un ejemplo simple de animación de un signo de salida.
Primero creamos el cuadro delimitador para el poste indicador, y le damos un contexto de posicionamiento relativo para asegurarnos de que podemos colocar los elementos absolutamente dentro de él..
#signpost width: 60px; altura: 196px; posición: relativa;
Ahora colocamos el recuadro en la página y colocamos las piezas de nuestro cartel dentro de ella..
A continuación, la publicación se posiciona con un índice z de dos, para colocarla en la parte superior del cartel..
#post width: 79px; altura: 196px; índice z: 2; posición: relativa;
Ahora, agregamos el signo, colocado debajo de la publicación, y lo giramos con la propiedad de transformación CSS3.
#sign altura: 46px; ancho: 80px; posición: absoluta; arriba: 10; izquierda: 60; -webkit-transform-origin: 0 0; -webkit-transform: rotate (86deg); índice z: 1; -webkit-transition: -webkit-transform 0.5s easet-in-out;
La señal se gira utilizando -webkit-transform: rotate (86deg), y se coloca debajo del poste. Para garantizar que la señal gire alrededor del punto adecuado, debemos cambiar la transformar el origen a la esquina superior izquierda: 0, 0.
Establecimos la transición para cambiar la propiedad -webkit-transform en 0.5s con un perfil de facilidad de entrada, y al pasar el cursor, giramos la señal de vuelta a su orientación original.
#signpost: hover #sign -webkit-transform: rotate (0deg);
Hacemos esto en el #signpost que contiene: hover en lugar de en el hover del #sign mismo.
Ahora podemos unir todo esto, usando animaciones de webkit, que nos dan el poder de llevar a cabo cosas como la rotación continua..
Comenzamos creando dos imágenes circulares y ubicándolas dentro de un div que contiene, como hicimos con el poste indicador arriba..
#círculos ancho: 180px; altura: 180px; posición: relativa; .outercircle ancho: 180px; altura: 180px; posición: absoluta; índice z: 1; arriba: 0: izquierda: 0; .middlecircle width: 90px; altura: 90px; posición: absoluta; índice z: 3; superior: 45px; izquierda: 45px;
Ahora necesitamos definir las animaciones; Giraremos los círculos en direcciones opuestas, por lo que necesitamos configurar dos animaciones.
@ -webkit-keyframes spin from -webkit-transform: rotate (0deg); a -webkit-transform: rotate (360deg); @ -webkit-keyframes spinrev from -webkit-transform: rotate (0deg); a -webkit-transform: rotate (-360deg);
La animación recibe un nombre de referencia, en este caso "spin" y "spinrev". Luego, les asignamos un a y desde valor; así que rotamos la imagen de 0 grados a 360 grados usando la transformación webkit, y a -360 para el reverso.
Ahora asignamos esta animación a los estados flotantes. Tenga en cuenta que, si lo asignamos al estado normal, la animación se ejecutará inmediatamente cuando se cargue la página..
#circles: hover .outercircle -webkit-animation-name: spin; -webkit-animation-iteration-count: infinito; -webkit-animation-timing-function: lineal; -webkit-animation-duration: 10s; #circles: hover .middlecircle -webkit-animation-name: spinrev; -webkit-animation-iteration-count: infinito; -webkit-animation-timing-function: lineal; -webkit-animation-duration: 5s;
Hacemos referencia al nombre de animación que creamos anteriormente (-webkit-animation-name: spin;). Luego, declaramos el número de veces que queremos que se ejecute la animación (-webkit-animation-iteration-count: infinite;). En este caso, infinito lo mantendrá dando vueltas y más vueltas mientras el #circles div está flotando sobre.
A continuación, configuramos la función de sincronización (-webkit-animation-timing-function: linear;), y, finalmente, establecemos una duración para cada iteración. En este caso, será de diez segundos (-webkit-animation-duration: 10s ;), y cinco para una revolución completa..
Una vez que tengamos todo funcionando, deberíamos considerar a nuestros usuarios que navegan sin navegadores web compatibles con CSS3. Esto se logra fácilmente usando una biblioteca de JavaScript como Modernizr, que agrega clases al elemento HTML relacionado con las capacidades del navegador.
Utilizando el ejemplo de publicación de signo anterior, los navegadores que no admiten las transformaciones CSS no colocarán el signo en la publicación correctamente; para que podamos apuntar a estos navegadores y simplemente ocultar el signo hasta que se desplace sobre.
.no-csstransforms #signpost #sign display: none; .no-csstransforms #signpost: hover #sign display: block;
Es tan simple como enlazar con el script de Modernizr, encontrar el nombre de clase apropiado y luego crear una declaración CSS separada para esa instancia.
Eso es todo por ahora. ¡Espero que lo hayan disfrutado! Déjame saber si tienes alguna pregunta / comentario a continuación!
Accentsconagua