Share
Hoy en día, cada vez más sitios web utilizan animaciones, ya sea en forma de GIF, SVG, WebGL, videos de fondo, etc. Cuando se usa correctamente, la animación en la web trae vida e interactividad, agregando una capa adicional de comentarios y experiencia para los usuarios.
En este tutorial voy a presentarte las animaciones CSS; una forma altamente eficaz de hacer las cosas que se está volviendo cada vez más popular a medida que mejora la compatibilidad con el navegador. Habiendo cubierto lo básico, vamos a construir un ejemplo rápido que animará un elemento cuadrado en un círculo:
Los diseñadores de Envato Market han estado ocupados creando una gama de animaciones CSS para que puedas conectarte a tus sitios web, desde sombras hasta cintas, controles deslizantes y más.
CSS3 Shadow Pack en Envato MarketTambién puede contratar a un experto en CSS en Envato Studio para que lo ayude con una amplia gama de correcciones y personalizaciones para su proyecto..
Expertos en CSS en Envato StudioEl componente principal de las animaciones CSS es @keyframes, La regla CSS donde se crea la animación. Pensar en @keyframes como etapas a lo largo de una línea de tiempo. Dentro @keyframes, Puedes definir estas etapas, cada una con una declaración de estilo diferente..
A continuación, para hacer que las animaciones CSS funcionen, debe enlazar @keyframes a un selector. Esto analizará gradualmente todo el código dentro de la @keyframes Declaraciones y cambiar el estilo inicial al nuevo estilo, basado en las etapas..
Aquí vamos a configurar las etapas de animación. Nuestro @keyframes Las propiedades son:
Por ejemplo:
@keyframes tutsFade 0% opacidad: 1; 100% opacidad: 0;
o:
@keyframes tutsFade from opacity: 1; a opacidad: 0;
o la taquigrafía
@keyframes tutsFade to opacity: 0;
El código anterior aplicará una transición a la opacidad de un elemento, desde opacidad: 1 a opacidad: 0. Cada uno de los enfoques anteriores logrará el mismo resultado final..
los animación la propiedad se utiliza para llamar @keyframes dentro de un selector de CSS. La animación puede tener múltiples propiedades:
Accentsconagua
nombre de la animación: @keyframes nombre (recuerda que elegimos tutsFade).duración de la animación: la duración del período de tiempo, la duración total de la animación desde el principio hasta el final.función de tiempo de animación: establece la velocidad de animación ( lineal | facilidad | facilidad de entrada | facilidad de salida | facilidad de entrada | cúbico-bezier ).animación-retraso: el retraso antes de que comience nuestra animación.animación-iteración-cuenta: Cuántas veces iterará a través de la animación.animacion-direccion: le ofrece la posibilidad de cambiar la dirección del bucle, de principio a fin o de extremo a inicio, o ambos.modo de relleno de animación: especifica qué estilos se aplicarán al elemento cuando finalice nuestra animación ( ninguno | hacia adelante | hacia atrás | ambos )Por ejemplo:
.element nombre-animacion: tutsFade; animación-duración: 4s; animación-retraso: 1s; animación-iteración-cuenta: infinito; animación-temporización-función: lineal; animación-dirección: alterna;
o taquigrafía
.elemento animación: tutsFade 4s 1s infinito lineal alternativo;
El código anterior creará un efecto de parpadeo, con un retardo de animación de 1 segundo, una duración total de animación de 4 segundos, con una dirección alternativa e iteraciones de bucle lineal infinitas.
Si bien es un borrador de trabajo, debemos usar prefijos específicos del navegador para garantizar la mejor compatibilidad posible con el navegador. Se aplican los prefijos estándar:
-webkit- -moz- -o- -Sra- Un animación la propiedad con prefijos de proveedores se verá así:
.elemento -webkit-animation: tutsFade 4s 1s infinito lineal alternativo; -moz-animation: tutsFade 4s 1s infinito lineal alternativo; -ms-animation: tutsFade 4s 1s infinito lineal alternativo; -o-animación: tutsFade 4s 1s infinito lineal alternativo; animación: tutsFade 4s 1s infinito lineal alternativo;
junto con @keyframes:
@ -webkit-keyframes tutsFade / * su estilo * / @ -moz-keyframes tutsFade / * su estilo * / @ -ms-keyframes tutsFade / * su estilo * / @ -o-keyframes tutsFade / * tu estilo * / @keyframes tutsFade / * tu estilo * /
En aras de la legibilidad durante este tutorial, continuaré sin usar prefijos, pero la versión final los incluirá y me gustaría animarlos a que los usen en su código CSS.
Para obtener más información sobre los prefijos de proveedores, puede consultar http://css3please.com/, que es un excelente sitio web para los recursos de prefijos de proveedores..
Puedes agregar múltiples animaciones usando un separador de coma. Digamos que queremos añadir una rotación adicional a nuestro tutsFade Elemento, lo haríamos declarando extra @keyframes y luego atándolos a nuestro elemento:
.elemento animación: tutsFade 4s 1s infinito lineal alternativo, tutsRotate 4s 1s infinito lineal alternativo; @keyframes tutsFade to opacity: 0; @keyframes tutsRotate a transform: rotate (180deg);
Vamos a saltar y crear una transición de forma simple; Una animación de cuadrado a círculo utilizando los principios anteriores. Tendremos cinco etapas en total y para cada etapa definiremos un radio de borde, una rotación y un color de fondo diferente a nuestro elemento. Basta de hablar, vamos a saltar en la codificación.
Primero, vamos a crear el marcado, un elemento para animar. Ni siquiera nos vamos a molestar con los nombres de clase, solo vamos a usar un div simple por ahora:
Luego, usando un selector de elementos (div ), Agregue el estilo por defecto al div:
div ancho: 200px; altura: 200px; color de fondo: coral;
Ahora vamos a preparar @keyframes, que llamaremos cuadrado a circulo, y las cinco etapas
@keyframes cuadrado a círculo 0% 25% 50% 75% 100%
Necesitamos definir algunos estilos dentro de estas etapas, entonces comencemos dictando el radio del borde Para cada esquina de la plaza:
@ -webkit-keyframes square-to-circle 0% border-radius: 0 0 0 0; 25% radio del borde: 50% 0 0 0; 50% radio del borde: 50% 50% 0 0; 75% radio del borde: 50% 50% 50% 0; 100% radio del borde: 50%;
Adicionalmente podemos declarar una diferente. color de fondo para cada etapa.
@keyframes cuadrado a círculo 0% radio-borde: 0 0 0 0; fondo: coral; 25% radio del borde: 50% 0 0 0; fondo: darksalmon; 50% radio del borde: 50% 50% 0 0; fondo: indianred; 75% radio del borde: 50% 50% 50% 0; fondo: lightcoral; 100% radio del borde: 50%; fondo: darksalmon;
Para realmente golpear la idea de casa, vamos más allá radio del borde y color de fondo Girando el div y agregando un poco de interés visual..
@keyframes cuadrado a círculo 0% radio-borde: 0 0 0 0; fondo: coral; transformar: rotar (0deg); 25% radio del borde: 50% 0 0 0; fondo: darksalmon; transformar: girar (45deg); 50% radio del borde: 50% 50% 0 0; fondo: indianred; transformar: girar (90deg); 75% radio del borde: 50% 50% 50% 0; fondo: lightcoral; transformar: girar (135deg); 100% radio del borde: 50%; fondo: darksalmon; transformar: girar (180deg);
Habiendo definido nuestra animación de cuadrado a círculo, debemos aplicarla a la división:
div ancho: 200px; altura: 200px; color de fondo: coral; animación: cuadrado a círculo 2s 1s infinito alternativo;
Aquí ves que hemos añadido una taquigrafía. animación propiedad, que establece:
cuadrado a circulo.2s.1s.infinito, por lo que continuará indefinidamente.alterno, así que se reproducirá de principio a fin, luego volverá al principio, luego nuevamente al final, y así sucesivamente.. Un último valor que podemos agregar a la propiedad de animación es el función de tiempo de animación. Esto definirá la velocidad, aceleración y desaceleración de nuestro movimiento. Esta función puede ser un valor muy detallado, que es difícil de calcular manualmente, pero hay muchos sitios web gratuitos que proporcionan recursos y personalización en vivo para las funciones de temporización de animación..
Una de esas herramientas es la Herramienta de animación de facilitación de CSS, así que vamos a usarla para calcular nuestra función de sincronización.
Me gustaría añadir un elástico efecto a nuestro cuadrado a circulo Animación, utilizando una función cúbica-bezier..
Después de haber jugado con los controladores y generado algún tipo de curva de Bezier, actualice el valor de la función de sincronización de la animación utilizando el fragmento de código proporcionado.
div ancho: 200px; altura: 200px; color de fondo: coral; animación: cuadrado a círculo 2s 1s infinito cúbico-bezier (1, .015, .295,1.225) alterno;
El código final, sin usar prefijos de proveedor ( -webkit- , -moz-, -Sra-, -o- ) es como sigue:
div ancho: 200px; altura: 200px; color de fondo: coral; animación: cuadrado a círculo 2s .5s infinito cubic-bezier (1, .015, .295,1.225) alterno; @keyframes cuadrado a círculo 0% radio-borde: 0 0 0 0; fondo: coral; transformar: rotar (0deg); 25% radio del borde: 50% 0 0 0; fondo: darksalmon; transformar: girar (45deg); 50% radio del borde: 50% 50% 0 0; fondo: indianred; transformar: girar (90deg); 75% radio del borde: 50% 50% 50% 0; fondo: lightcoral; transformar: girar (135deg); 100% radio del borde: 50%; fondo: darksalmon; transformar: girar (180deg);
Todo funciona bien en los navegadores modernos, pero Firefox tiene el desagradable hábito de procesar pobremente la transformación de objetos. Eche un vistazo a estas líneas irregulares para ver a qué me refiero:
Por suerte, hay una solución para esto. Agrega el siguiente esquema transparente a tu div y Firefox renderizará las cosas perfectamente!
esquema: 1px sólido transparente;
¡Eso es! Hemos utilizado la sintaxis de la animación CSS para crear una animación simple y repetitiva.
Para obtener información actualizada sobre la compatibilidad de los navegadores con la animación CSS, consulte ¿Puedo usar ... pero en pocas palabras, los navegadores compatibles incluyen: Firefox 5?+, IE 10+, Chrome, Safari 4+, Opera 12+.
