مولد إطارات مفتاحية CSS — إنشاء تحريكات

تحريكات CSS تتيح إنشاء واجهات تفاعلية دون JavaScript. استخدم مولد الإطارات المفتاحية لإنشاء تحريكات سلسة وعالية الأداء.

أساسيات تحريكات CSS

@keyframes slidein {
  from { transform: translateX(-100%); }
  to   { transform: translateX(0); }
}

.element {
  animation: slidein 0.3s ease-out;
}

خصائص animation

• animation-name: اسم @keyframes
• animation-duration: مدة التشغيل
• animation-timing-function: ease، linear، cubic-bezier
• animation-delay: تأخير البدء
• animation-iteration-count: عدد التكرارات (infinite ممكن)

تحسين الأداء

تحريك transform وopacity فقط يعمل بتسريع GPU. تحريك width وheight وmargin يسبب إعادة رسم بطيئة.

إمكانية الوصول

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; }
}