http://www.w3schools.com/css3/css3_animations.asp
Sur Reinom, j'utilise aussi les transitions qui permettent de très bon effets. En fait, ce sont souvent des effets assez simples, mais qui rendent la navigation agréable. On s'en fiche un peu d'avoir des graphismes à la Crysis 3 sur un jeu par navigateur si cela doit faire ramer ledit navigateur ou si cela n'apporte rien à l'expérience utilisateur. En revanche, voir le bouton faire "boing boing" et sautiller sur place quand un message arrive, ca a son petit effet. Ou encore, voire un logo de la planète tourner sur elle-même pour montrer que le temps avance et que les jours passent, c'est agréable. Pas besoin de flash pour les animations type "GIF" (images à afficher l'une après l'autre): CSS3 keyframe suffit
On peut, via CSS3 (propriété associée entre parenthèses):
- Faire tourner des objets (rotation)
- Les translater (scale)
- Les étirer (translate)
- Les contorsionner via des transformations matricielles 2D (matrix, skew)
- Les manipuler pour donner des effets 3D (là, y'a plein de propriétés)
- Changer les couleurs, la font etc
__________________________________________________________
Il y a aussi un excellent site web sur les sélecteurs CSS qui permet de bien sélectionner les éléments auxquels appliquer les transformations et qui donne également les pseudo-sélecteurs comme :hover (la souris passe sur l'élément) ou :active (élément actif, ex: lien cliqué ou tabulé).
Sur Reinom, j'utilise aussi les transitions qui permettent de très bon effets. En fait, ce sont souvent des effets assez simples, mais qui rendent la navigation agréable. On s'en fiche un peu d'avoir des graphismes à la Crysis 3 sur un jeu par navigateur si cela doit faire ramer ledit navigateur ou si cela n'apporte rien à l'expérience utilisateur. En revanche, voir le bouton faire "boing boing" et sautiller sur place quand un message arrive, ca a son petit effet. Ou encore, voire un logo de la planète tourner sur elle-même pour montrer que le temps avance et que les jours passent, c'est agréable. Pas besoin de flash pour les animations type "GIF" (images à afficher l'une après l'autre): CSS3 keyframe suffit
Code :
@keyframe GIF
{
0% {background-image: url("Image2.png");}
10% {background-image: url("Image2.png");}
25% {background-image: url("Image1.png");}...
}On peut, via CSS3 (propriété associée entre parenthèses):
- Faire tourner des objets (rotation)
- Les translater (scale)
- Les étirer (translate)
- Les contorsionner via des transformations matricielles 2D (matrix, skew)
- Les manipuler pour donner des effets 3D (là, y'a plein de propriétés)
- Changer les couleurs, la font etc
__________________________________________________________
Il y a aussi un excellent site web sur les sélecteurs CSS qui permet de bien sélectionner les éléments auxquels appliquer les transformations et qui donne également les pseudo-sélecteurs comme :hover (la souris passe sur l'élément) ou :active (élément actif, ex: lien cliqué ou tabulé).