Finissons la semaine avec quelque chose d'amusant allons-nous? Les animations par images clés CSS ne prennent actuellement en charge que très peu de navigateur, mais elles sont toujours intéressantes à apprendre et à expérimenter.
Ci-dessous, nous construisons une page Web simple qui exploite les animations d'images clés Webkit pour décaler doucement la couleur d'arrière-plan sur une boucle sans fin. Intrigué? Continuer à lire!
Démo
Pour avoir un aperçu de ce que nous allons construire aujourd'hui, cliquez sur le lien ci-dessous.
Démo en direct: Cliquez ici
Animations de Keyfame: Toujours juste pour le plaisir
Avec CSS3, il est assez facile de faire passer une couleur dans une autre, par exemple avec une commande de survol. Définissez deux couleurs différentes, ajoutez une transition et le tour est joué. Mais que se passe-t-il si nous voulons quelque chose qui change continuellement de couleur? La réponse réside dans les images clés.
Actuellement, le support pour les animations d'images clés en CSS est assez faible. En fait, vous ne pouvez vraiment compter que sur les navigateurs Webkit tels que Safari et Chrome (Firefox 5 devrait également bénéficier du support). Le malheur est donc que, comme beaucoup d’astuces CSS3, ce n’est pas tout à fait prêt à être utilisé en production, à moins d’être parfaitement préparé à ce que bon nombre de vos utilisateurs ne profitent pas de cette expérience.
Comment fonctionnent les images clés
Les animations d'images clés sont l'une des nouvelles fonctionnalités les plus complexes de CSS. En fait, cela ressemble un peu plus à une programmation qu’à un style, même au point de presque déclarer une variable! Faisons un rapide et sale parcours pour voir comment ils fonctionnent.
La première chose à faire est de déclarer le bloc d'images clés du webkit et de nommer votre animation.
Comme je l'ai indiqué ci-dessus, le nom de votre animation est presque une variable que vous utiliserez plus tard. Assurez-vous qu'il est à la fois descriptif et facile à mémoriser. Par exemple, pour notre expérience, nous pourrions utiliser le nom "colorPulse".
Ensuite, nous remplissons ceci avec une sorte de chronologie pour notre animation. Pensez-y comme à la déclaration d'images clés, exactement comme dans un programme d'animation. Seulement ici, vous utilisez du code pur. Les pourcentages représentent l'état de l'objet à ce point de l'animation.
Ici, nous animons évidemment la propriété background-color. À 0%, la couleur serait rouge, à 50%, elle serait blanche et à 100%, elle serait bleue. Toute l'interpolation est faite automatiquement, il ne reste donc qu'à appliquer l'animation à un élément spécifique et à définir le comportement. Ici, nous l'appliquons à un div.
Comme vous pouvez le constater, nous avons utilisé le nom de l'animation, qui cible les éléments que nous avons configurés auparavant. Ensuite, nous définissons la durée (10 secondes), le nombre d'itérations (infini) et la direction (alternatif). L’animation de ce dernier va et vient: rouge, blanc, bleu, blanc, rouge, blanc, bleu, etc.
Ceci est vraiment juste le raccourci pour ces déclarations. Vous pouvez également les définir un à la fois. Voici une liste plus longue des propriétés d'animation que vous pouvez définir:
Fond de site Web pulsant
Maintenant que nous avons une idée de la façon dont cela fonctionne, allons plus loin en construisant un exemple concret. Nous commencerons par définir une conception de page de base, puis nous ajouterons notre animation.
Couleur de fond
Afin de concevoir la page, nous devons choisir une couleur de fond. C'est une tâche intéressante compte tenu du projet. Notre objectif est de créer un fond qui passe d’une couleur à l’autre. Je ne saurais trop insister sur le danger que présente le concepteur. Vous êtes presque condamné à créer quelque chose de si laid que personne ne peut le regarder!
La meilleure façon d’aborder la question est de rester discret. Nous voulons des postes de travail lents et en douceur qui plaisent et qui ne bousculent pas. Si nous sélectionnons des couleurs trop vives ou trop vives, nous allons brûler les yeux des spectateurs.
Depuis que nous venons de passer Easer, mon esprit est bloqué dans les pastels et je me suis dit qu'une telle palette pourrait être parfaite pour ce projet. J'ai tiré Kuler, recherché? Pastel? et a trouvé la palette suivante.
Ce sont les couleurs que nous allons utiliser pour notre arrière-plan. Combiné à un décalage très lent, il devrait nous donner un effet assez doux et attrayant.
HTML de base
Pour jeter les bases de notre expérience, j'ai créé mon cliché typique? conception de sites Web: un en-tête, un sous-titre et une image. Nous n'avons vraiment pas besoin de beaucoup, juste assez pour que la page ne soit pas incroyablement ennuyeuse.
Comme vous pouvez le constater, nous plaçons les intervalles à 0%, 25%, 50%, 75% et 100% afin que notre animation soit bien décomposée.À chaque arrêt, nous avons placé une couleur de notre palette Kuler.
Ensuite, en plus d'appliquer une couleur de fond standard, qui servira de sauvegarde, nous avons déclaré l'animation. Remarquez que je l'ai réglé sur une énorme quarantaine. Encore une fois, étant donné que cette animation a tout le potentiel d'être intense, nous souhaitons qu'elle soit très lente. En fait, j'aime bien son apparence avec le temps alloué pour doubler cela.
Produit fini
Et encore une fois, juste au cas où vous l'auriez manqué ci-dessus, voici le produit fini. Notez à quel point les transitions sont agréables d'une couleur à l'autre. Depuis que nous avons commencé avec une belle palette, les changements sont assez naturels et pas trop distrayants.
Démo en direct: Cliquez ici
Conclusion
Au cours des prochaines années, vous constaterez une prise en charge croissante des animations d'images clés CSS. À l’heure actuelle, ils fonctionnent très bien dans Safari et Chrome, qui donnent toujours un aperçu de l’avenir du code HTML et du code CSS, et sont compatibles avec Firefox @ -moz-keyframes.
Le but de cet article était de vous faire réfléchir à toutes les animations non traditionnelles que vous pouvez créer avec des animations d'images clés. J'espère que vous avez appris une chose ou deux et que vous avez été inspiré pour créer vos propres applications uniques.