Écran de démarrage Discourse avec des images SVG personnalisées

Annonces
13

Veuillez noter qu’il y a un léger changement dans ce que nous autorisons pour l’animation SVG (et j’ai mis à jour l’OP pour refléter cela). À l’origine, nous autorisions les animations SMIL dans les SVG, mais il s’avère qu’elles saccadent car le navigateur met en pause ce type d’animation pendant l’exécution de javascript.

Par conséquent, la recommandation est désormais de n’utiliser que les animations de transformation CSS et d’opacité dans vos SVG, car celles-ci ne sont pas bloquées par le JS.

Si vous regardez le SVG de @ばこん ci-dessus… il fournit un bon exemple d’animation autorisée :

@keyframes unique-slide {
  0% { transform: translateX(-80px); }
  100% { transform: translateX(260px); }
}

Faites également attention à donner des noms uniques à vos animations afin qu’elles n’entrent pas en conflit avec d’autres animations dans Discourse (des noms comme “blink”, “rotate”, “fade”, etc. pourraient être trop génériques). Utiliser un préfixe comme unique- est un excellent moyen d’éviter cela.

4 « J'aime »