De l'animation web avec du CSS

Mes animations de cette semaine en CSS pure.

De l'animation web avec du CSS

Cette semaine j'ai eu a faire de l'animation web avec du CSS. J'ai fait mon travail en deux parties. En premier j'ai intégré des animations directement dans un site web et pour la deuxième partie j'ai animé des images. J'ai appris à utiliser dans le CSS les keyframes avec les temps d'animation et les pourcentages dans les animations.

Animer un site web

La semaine dernière j'ai codé un site en html ou j'ai rajouté du jquery. Pour cette semaine, je repris ce site ou j'ai crééé une autre page pour rajouter des animations en CSS. J'ai créer la page du fiche produit ou j'ai animé l'image du produit, des lignes, les étoiles et enfin une animation sur des icônes. J'ai eu à utiliser des animations de scale et de translate surtout et en plus quelques utilisations du rotate.

screenshot animation

Ce capture d'écran est pour montrer aà quoi ressemble la page et on peut voir sur l'icône de recherche lorsque la souris est desssus, l'animation sur le scale s'enclenche.

screenshot animation

Ici c'est plus en bas de la page, il y a une animation sur la canette et sur les étoiles. La canette a une animation sur le hover, on a l'impression que la canette se fait secoué. Les étoiles sur le hover vont faire une rotation infinie tant que la souris est dessus.

Faire une animation image

Après avoir fait l'animation sur le site j'ai decidé de faire une animation d'un image. J'ai gardé le thème de la bière que j'avait avant, mon image est donc sur les étapes de création de la bière dans une brasserie. J'ai pu animer plusieurs choses: le déplacement d'un homme et d'une souris, une animation de vapeur et enfin une animation de bulles. Je me suis beaucoup amusé avec cette animation, même si parfois c'était compliqué à faire un rendu réaliste notamment des bulles et de la vapeur. Tout de même c'est une animation dont je suis fière et que je trouve amusante.

screenshot animation

Vous pouvez voir une capture de l'animation, et ce à quoi ca ressemble. Sur l'animation l'homme se deplace de gauche à droite avancant et en reculant pour donner un effet de profondeur dans la pièce. La souris se déplace de droite à gauche et passant en dessous des tables. Les bulles vont remonter du joint de la machine, jusqu'au bas de la machine juste au-dessus. Enfin la vapeur composé de quatres points vont s'agrandir en remontant et disparaitre au fur et à mesure. Toutes les animations sont en boucle mais ils n'ont pas le meme timing donc chaque cycle d'animation ne sera jamais la même.

Je préfère coder les animations en CSS du coup, et je pense retravailler mon animation de la brasserie pour l'améliorer. C'est certainement quelque chose que je vais continuer à faire.

Hannah