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

10 nuevas características para Windows 10

La interfaz modificada conocida como Modern UI, la decisión de descartar el menú "Inicio" y muchas otras fallas y equivocaciones en Windows 8 se ha ganado el récord de ser la versión de Windows con la tasa de adopción más lenta en su historia. Así que todos los ojos en Windows 10 recuperan parte de la gloria perdida.Window

(Consejos de tecnología y diseño)

Cómo dar Crítica Constructiva

Internet nos ha lavado el cerebro para hacernos creer que podemos envejecer , pero no tenemos que crecer, pero uno sabe que tiene que hacerlo, eventualmente; los billetes no se pagan solo. Cuando trabajamos en el mundo freelance, todos amamos trabajar con adultos; personas de las que podemos depender para entregar lo que necesitamos

(Consejos de tecnología y diseño)