لاحظ أن هناك تغييرًا طفيفًا فيما نسمح به لتحريك SVG (وقد قمت بتحديث المنشور الأصلي ليعكس ذلك). في الأصل، كنا نسمح بتحريكات SMIL في ملفات SVG، ولكن اتضح أن هذه التحريكات تتقطع لأن المتصفح يوقف هذا النوع من التحريك أثناء تنفيذ جافاسكريبت (javascript).
لذا، بدلاً من ذلك، التوصية هي استخدام تحريكات transform و opacity فقط في ملفات SVG الخاصة بك، حيث لا يتم حظر هذه التحريكات بواسطة JS.
إذا ألقيت نظرة على SVG الخاص بـ @ばこん أعلاه… فإنه يقدم مثالاً جيدًا لتحريك مسموح به:
@keyframes unique-slide {
0% { transform: translateX(-80px); }
100% { transform: translateX(260px); }
}
كن حذرًا أيضًا في إعطاء تحريكاتك أسماء فريدة حتى لا تتعارض مع التحريكات الأخرى في Discourse (الأسماء مثل “blink” أو “rotate” أو “fade” وما إلى ذلك قد تكون عامة جدًا). استخدام بادئة مثل unique- هي طريقة رائعة لتجنب ذلك.