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

20 tutoriels de motifs pour vos futurs modèles

20 tutoriels de motifs pour vos futurs modèles

Différents projets graphiques et de conception web requièrent des éléments de design différents et les motifs ne sont que l'un d'entre eux. Ils peuvent être utilisés comme arrière-plan ou au premier plan dans diverses situations, selon vos besoins. Vous pouvez même utiliser un motif que vous avez vous-même créé pour ajouter une touche personnelle à votre travail.Aujourd'

(Conseils techniques et de conception)

Twist: un outil de communication riche en fonctionnalités alternatif à Slack

Twist: un outil de communication riche en fonctionnalités alternatif à Slack

Les applications de communication d'équipe telles que Slack deviennent de plus en plus populaires de nos jours car elles rationalisent la communication entre les équipes et les membres de l'équipe. Maintenant, le marché de l'application de communication d'équipe vient d'obtenir une nouvelle entrée appelée Twist, créée par les mêmes personnes qui vous ont amené Todoist.Cependant,

(Conseils techniques et de conception)