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

Comment utiliser des émoticônes dans la ligne d'objet de l'e-mail

Je m'inscris à beaucoup de bulletins d'information pour me tenir au courant de l'évolution rapide de l'industrie dans laquelle je suis, le développement web. Récemment, je vois une utilisation plus fréquente des émoticônes ou Emoji dans la ligne d'objet de l'e-mail .Intrigué, j'ai examiné le problème et trouvé quelques études suggérant des avantages lorsque des émoticônes sont utilisées dans la ligne d'objet de l'e-mail, augmentant spécifiquement le taux d'ouverture des emails, ce qui est bon pour les affaires.Avoir une icône

(Conseils techniques et de conception)

Fascinant Fruits et Légumes Art par Dan Cretu

Rappelez-vous comment votre mère vous dit toujours de manger vos fruits et légumes mais en quelque sorte le chocolat et la viande gagnent toujours à la place? Le fait est que les fruits et les légumes sont bons pour vous, et qu'ils sont bons pour l'art, entre les mains du bon artiste.Dan Cretu est un artiste conceptuel qui aime jouer avec sa nourriture, sorta. Il

(Conseils techniques et de conception)