hideout-lastation.com
Paradis Pour Les Concepteurs Et Les Développeurs


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

Beaux logos de typographie pour votre inspiration

Beaux logos de typographie pour votre inspiration

Un logo est une partie essentielle de l'identité de l'entreprise. Pourtant, il est difficile de créer un logo simple mais facile à retenir. Revenir à l'essentiel et n'utiliser rien de plus qu'une police pour créer un logo peut être la solution géniale que vous recherchez. Une utilisation intelligente des couleurs, l'arrangement des lettres, et quelques éléments de conception sélectionnés peuvent créer un logo créatif adapté aux masses. En bref, vou

(Conseils techniques et de conception)

Hangouts Chat, la deuxième moitié du Pivot de Google Hangouts vers les entreprises

Hangouts Chat, la deuxième moitié du Pivot de Google Hangouts vers les entreprises

Il n'y a pas si longtemps, nous avons parlé de Hangouts Meet, la tentative de l'entreprise de transformer Hangouts en un service axé sur l'entreprise . Apparemment, Meet ne représente que la moitié de la nouvelle expérience Hangouts, car Google a annoncé la création d'un service affilié appelé Hangouts Chat.Là où &q

(Conseils techniques et de conception)