Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Animation
Webdesign

Inspiration : 10 Exemples d’Animation pure CSS sur CodePen

by
Length:ShortLanguages:

French (Français) translation by Richter Domagas (you can also view the original English article)

Nos navigateurs mobiles continuent à obtenir la plus puissante et mieux en nous montrant des animations étonnantes, belles. Lorsqu’il est combiné avec la puissance de mise en page CSS, il est possible de créer un magnifique travail sans utiliser d’images en tout. Le résultat est évolutive, chargement rapide et bien, impressionnant à voir.

Nous allons jeter un oeil à ce que des choses étonnantes gens faire et animation avec seulement le HTML et le CSS.

1. Motard pur CSS

Il y a tellement de choses qu’on effectue, il est difficile de croire que c’est simplement HTML et CSS ! Rotation des animations ainsi que de multiples couches mouvements se combinent pour donner l’impression que ce cycliste et son vélo sont en gelée. Belle utilisation de BEM dans la classe d’affectation de noms trop !

2. Pur CSS Saturne hula hoop

Combinant beaucoup de pièces mobiles peut faire un simple ensemble d'éléments HTML paraître comme une animation plus complexe et c'est quelque chose de que cette démo fait bien. Voir comment les deux planètes interagissent, tandis que les « particules » en boucle sont dispersés seulement assez pour semblent aléatoires.

3. Couleur des couches CSS animation

Couches de couleurs simples peuvent ne pas sembler beaucoup, mais quand ils se déplacent, qu'ils peuvent transporter des charges de caractère. Dans cet exemple, un ensemble de balises de paragraphe HTML semi-transparents sont animées et l'animation empilée qui en résulte est hypnotique.

4. Chargeur de glace

Il ne faut toujours JPG ou PNG pour faire de belles images et c'est un autre exemple. Un seul conteneur div et quatre autres est tout ce qu’il faut pour faire cette image délicieusement regardable petit chargeur de glace-crème-sur le thème. Le code résultant est beaucoup plus petit qu’un GIF animé.

5. Pigeons pures CSS

Lorsque vous combinez l’utilisation artistique des éléments HTML avec une animation de caractère, c’est le résultat. Une animation étonnamment lisse encore occupée pleine de plaisir. Respecte massive à Julia Muzafarova de ce qui doit avoir été incroyablement fastidieux travail construire tous ces ensembles d'images clés. Plusieurs cafés trop !

6. Dormir chat

Réunissant beaucoup d'éléments HTML simples avec un tas d'animations subtiles, amusantes, ce chat endormi a beaucoup de caractère. Cet exemple utilise Sass et variables pour contrôler l'animation. Essayez de changer certains pour voir ce qui se passe !

7. L’ours noir

Des animations fluides est possible lors de l’utilisation de HTML et CSS, surtout quand nous suivons quelques principes de base. Cette animation conserve le nombre d’éléments à une utilisation minimale et beaucoup de transformations.

8. Éponge de la CSS

Animations rapides peuvent ajouter beaucoup de caractère lorsqu’il est combiné. Dans cette démo, voir comment les bulles et éclaboussures sont chorégraphiées ensemble pour créer l’animation mignonne avec une éponge heureuse, tout cela sans les images.

9. Pur CSS case à cocher mail

Une série d'animations d'image clé peut raconter une histoire ou aider les gens à comprendre ce qu'ils cherchent. Nous voyons ici ouvrir une enveloppe et obtenir une lettre.

10. Précharge de soins

Un peu de mouvement subtil peut créer de grands sentiments d'intensité ! Ce chargeur dispose d'une voiture ressemblant c'est à accélérer le long, tous créés avec quelques éléments et animations CSS. Sans images, que ce serait la charge rapide.

Laissez-vous inspirer !

Merci comme toujours à CodePen et l'esprit créatif derrière ces démos ; ils ont certainement nous a fourni beaucoup d'inspiration dans ces exemples d'animation. Découvrez les postes suivants pour en savoir plus de la même chose et d'apprendre à créer vos propres animations CSS !

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.