07-05-2013, 01:10 PM
CSS te permet de faire des animations via @keyframes.
Tu pourrais donc générer le @keyframes, via javascript ou coté serveur, et appliquer l'animation à ton objet HTML.
@keyframes te permettront de positionner tes objets (propriétés top/right/bottom/left, avec position absolute par exemple), de les transformer (transform).
L'avantage, face à des setinterval, c'est que CSS est accélérable par le hardware (à l'image de canvas). L'avantage sur canvas est multiple: le DOM peut être compréhensible par les robots et les lecteurs d'écran, il est sympa à manipuler, normalisé depuis longtemps, et bien plus vectoriel que le canvas. Par exemple, un texte tourné dans un canvas est un peu baveux, un texte tourné dans le DOM est propre.
A voir aussi, tu peux essayer de faire l'animation avec SVG.
Là, l'avantage est de manipuler cela un peu comme le DOM, donc proprement, en gardant un truc vectorisé, donc non baveux. l'animation peut alors se faire par CSS, ou par javascript sinon.
Tu pourrais donc générer le @keyframes, via javascript ou coté serveur, et appliquer l'animation à ton objet HTML.
@keyframes te permettront de positionner tes objets (propriétés top/right/bottom/left, avec position absolute par exemple), de les transformer (transform).
L'avantage, face à des setinterval, c'est que CSS est accélérable par le hardware (à l'image de canvas). L'avantage sur canvas est multiple: le DOM peut être compréhensible par les robots et les lecteurs d'écran, il est sympa à manipuler, normalisé depuis longtemps, et bien plus vectoriel que le canvas. Par exemple, un texte tourné dans un canvas est un peu baveux, un texte tourné dans le DOM est propre.
A voir aussi, tu peux essayer de faire l'animation avec SVG.
Là, l'avantage est de manipuler cela un peu comme le DOM, donc proprement, en gardant un truc vectorisé, donc non baveux. l'animation peut alors se faire par CSS, ou par javascript sinon.