https://blog.gyrosco.pe/smooth-css-animations-7d8ffc2c1d29?gi=1edbfb5aef2d#.2cigjk6yi
Traduction rapide pour mémoire de ces 10 principes pour des animations fluides...
- Ne change jamais d'autres propriétés que opacity ou transform ! (même si ça a l'air chouette, ne le fais pas !)
- Cache les objets avec opacity:0 et pointer-events: none pour éviter les rendus inutiles
- N'anime pas tout en même temps (à la place fais des chorégraphies: déclenche une série d'animations par l'ajout d'une classe, chaque animation ayant son propre transition-delay).
- Augmente les transition-delay pour créer un effet de chorégraphie.
- Utilise un modificateur de délai global pour créer tes animations en slow motion puis accélérer ensuite
- Filme tes animations pour avoir une perspective à la troisième personne.
- L'activité réseau peut ralentir les animations: pense au preload or temporise les grosses requêtes HTTP
- N'attache pas d'animations au défilement de page et évite de créer tes propres scrollbars
- Teste sur mobile tôt et souvent.
- Teste sur des appareils différents.
Via Kalvn's linksSource image
repost automatique de mon site...