Controlar la animación CSS3 con la función de pasos ()

La animación es una de las mejores características introducidas en CSS. En el pasado, la animación web solo estaba disponible en el territorio JavaScript o Flash. Pero, hoy en día, muchos sitios web optan por usar CSS para agregar animaciones sutiles . En artículos anteriores, hemos analizado cómo hacer algunas cosas interesantes con animación CSS, como agregar un efecto de marquesina y agregar un efecto de rebote a algo.

En este artículo, volveremos a sumergirnos en la animación CSS. Esta vez, vamos a discutir una función de animación CSS, steps(), que nos permite controlar el movimiento de la animación ; no te asustes, no es tan desconcertante como suena. Vamos a ver.

¿Así que qué es lo?

Normalmente, la animación en CSS irá directamente de principio a fin a la duración especificada. steps() es parte de la función de sincronización de animación. Nos permite controlar la animación para moverla gradualmente. El mejor ejemplo que muestra cómo funcionan los steps() sería la segunda mano de un reloj analógico; los relojes de segunda mano no se mueven continuamente, sino que sus movimientos se dividen en etapas. Así que vamos a replicarlo con animación CSS y steps() .

Replicando la segunda mano de un reloj

Primero agreguemos los fotogramas clave que rotarán la Segunda Mano para 360 grados; la rotación comenzará en 90 grados (o a las 12 en punto). Tenga en cuenta que el siguiente código puede necesitar un prefijo ( -moz-, -o-, y -ms- ) para funcionar en todos los navegadores.

 @ -webkit-keyframes rotation {from {transform: rotate (90deg); } a {transformar: rotar (450deg); }} 

La manecilla de segundos se moverá constantemente a cada segundo y completará una rotación de 360 ​​grados en 60 segundos. Por lo tanto, aquí estableceremos la duración de la animación durante 60s y esto le indica al navegador que la complete en 60 pasos con los steps(60) modo.

 .segundo {animación: pasos 60s de la rotación (60) infinitos; origen de transformación: 100% 50%; // estilos decoración de fondo-color: # e45341; altura: 2px; margin-top: -1px; posición: absoluta; arriba: 50%; ancho: 50%; } 

Hemos creado dos demos para esto; uno con steps() y uno con linear . Puede ver los diferentes movimientos de esta captura de pantalla a continuación.

En este punto, con suerte, puedes descubrir e imaginar cómo funcionan los steps() . Para ver la demostración en acción, siga este enlace a continuación.

• Ver demostración
• Descargar Fuente

Más inspiración ...

Además, aquí hemos recopilado algunos excelentes experimentos y demostraciones que explotan los steps() de muchos desarrolladores web. Échales un vistazo y espero que puedas inspirarte un poco.

• Animación de tipeo de CSS3 con pasos () por Lea Verou
• Cat Walk por Rachel Nabors
• Ken's Street Fighter II por David Walsh

Agregue soporte Emoji a su sitio web con Emoji CSS

Los Emojis se han hecho cargo de las conversaciones digitales y estos lindos íconos impregnaron rápidamente la cultura de Internet con un estallido. Ahora son una parte cotidiana de nuestras vidas y puedes encontrarlos en todas partes, desde aplicaciones de escritorio hasta WordPress.Y si alguna vez quisiste emojis personalizados en tu sitio, entonces Emoji CSS es la biblioteca perfecta para usar.E

(Consejos de tecnología y diseño)

Ideas de intercambio de regalos: 40 regalos que puede obtener por menos de $ 5

La mejor parte acerca de las compras navideñas son las gangas que están disponibles en ciertas tiendas, tanto tiendas en línea como físicas. Si sabe dónde buscar, puede encontrar gemas por debajo del precio de $ 5. Hemos hecho todo el trabajo y hemos encontrado 50 de estas cosas de menos de $ 5 que puedes comprar durante esta temporada festiva (no estamos bromeando, estas son ofertas de tiempo limitado).Algu

(Consejos de tecnología y diseño)