CSS — Animations

مقدمة

حركات CSS تنشئ انتقالات عبر keyframes.

ماذا ستتعلم؟

• @keyframes
• مدة الحركة
• timing
• تكرار

الصياغة

@keyframes fade{ from{opacity:0} to{opacity:1} }

مثال

@keyframes pop{
  from{ transform:scale(.96); opacity:.2; }
  to{ transform:scale(1); opacity:1; }
}
.box{ animation: pop .25s ease-out; }

ملاحظات

• اجعل الحركة خفيفة.
• transform/opacity أفضل للأداء.

  جرّب بنفسك: افتح Playground: /ar/playground/html