Contrôle de l'animation CSS3 avec steps () Fonction

L'animation est l'une des plus grandes fonctionnalités introduites dans CSS. Dans le passé, l'animation Web n'était disponible que sur le territoire JavaScript ou Flash. Mais, aujourd'hui, de nombreux sites choisissent d'utiliser CSS pour ajouter une animation subtile . Dans les articles précédents, nous avons vu comment faire des choses intéressantes avec l'animation CSS, comme ajouter un effet de sélection et ajouter un effet de rebond à quelque chose.

Dans cet article, nous allons à nouveau plonger dans l'animation CSS. Cette fois, nous allons discuter d'une fonction d'animation CSS, steps(), qui nous permet de contrôler le mouvement de l'animation - ne paniquez pas, ce n'est pas aussi déroutant que cela puisse paraître. Nous allons jeter un coup d'oeil.

Alors c'est quoi?

Normalement, l'animation en CSS ira directement du début à la fin à la durée spécifiée. steps() fait partie de la fonction de synchronisation de l'animation. Cela nous permet de contrôler l'animation pour se déplacer progressivement. Le meilleur exemple qui montre comment les steps() fonctionne serait la seconde main d'une horloge analogique; l'aiguille des secondes ne bouge pas continuellement, mais ses mouvements sont divisés en étapes. Alors reproduisons-le avec l'animation CSS et les steps() .

Répliquer la seconde main d'une horloge

Commençons par ajouter les images clés qui feront pivoter la Trotteuse sur 360 degrés; la rotation commencera à 90 degrés (ou à 12 heures). Notez que le code suivant peut avoir besoin d'un préfixe ( -moz-, -o-, et -ms- ) pour fonctionner à travers les navigateurs.

 @ -webkit-keyframes rotation {from {transform: rotate (90deg); } à {transformer: rotate (450deg); }} 

L'aiguille des secondes se déplace régulièrement toutes les secondes et complète une rotation de 360 ​​degrés en 60 secondes. Ainsi, ici, nous allons définir la durée de l'animation pour les 60s et cela indique au navigateur de le compléter en 60 étapes avec des steps(60) comme ça.

 .second {animation: pas de 60s de rotation (60) infini; transform-origine: 100% 50%; // styles décoration couleur de fond: # e45341; hauteur: 2px; marge supérieure: -1px; position: absolue; en haut: 50%; largeur: 50%; } 

Nous avons créé deux démos pour cela; une avec des steps() et une avec linear . Vous pouvez voir les différents mouvements de cette capture d'écran ci-dessous.

À ce stade, j'espère, vous pouvez comprendre et imaginer comment fonctionne steps() . Pour voir la démo en action, suivez ce lien ci-dessous.

• Voir la démo
• Source de téléchargement

Plus d'inspiration ...

En outre, nous avons rassemblé ici quelques expériences et démonstrations formidables qui exploitent les steps() de nombreux développeurs Web. Vérifiez-les et j'espère que vous pourrez vous en inspirer.

• Animation de typage Pure CSS3 avec steps () par Lea Verou
• Cat Walk par Rachel Nabors
• Ken Street Fighter II par David Walsh

10+ Plugins Photoshop gratuits pour les concepteurs Web

L'utilisation des extensions Photoshop augmente considérablement sa capacité à vous aider à concevoir, optimiser votre flux de production et vous rendre plus productif. Vous pouvez utiliser un plugin Photoshop pour accélérer les tâches répétitives ou fastidieuses telles que:générer de longues ombresexporter des calques Photoshopconvertir PSD en CSS3convertir le texte Photoshop en SVGconstruire des spécifications de conception dans Photoshopconvertir le design skeuomorphe au design platIl y a beaucoup d'autres extensions Photoshop sur cette liste, et sur cette liste il y en a 12 superbes

(Conseils techniques et de conception)

18 plugins essentiels pour tirer le meilleur parti du texte sublime

Même si SublimeText est livré avec un tas de fonctionnalités qui aident notre travail en tant que développeurs web, comme tout autre outil, il y aura toujours une place pour les améliorations . C'est quand les plugins peuvent être très utiles (et nous sommes de grands fans de plugins).Avant de continuer, vous voudrez peut-être consulter nos précédents articles sur SublimeText pour voir ce qu'il peut faire dans son état natif:Sélection facile des couleurs dans un texte sublimeGérer les notes et les listes avec un texte sublimeComment compiler Sass avec un texte sublimeComment actualiser

(Conseils techniques et de conception)