وثائق CSS قابلة للتشغيل: animation في CSS

Q: كيف أصنع حركة في CSS؟

عرّف الخطوات بـ @keyframes name { from { ... } to { ... } }، ثم طبّقها على عنصر بالخاصية animation مع مدة: animation: name 1s ease-out;. المدة مطلوبة، لأن قيمتها الافتراضية 0s.

Q: كيف أجعل حركة CSS تتكرر إلى الأبد؟

اضبط animation-iteration-count: infinite، أو أضف infinite إلى الاختصار: animation: spin 1s linear infinite;. أضف alternate لتشغيلها إلى الأمام ثم إلى الخلف في كل دورة.

Q: كيف أوقف حركة CSS مؤقتًا؟

اضبط animation-play-state: paused على العنصر، مثلًا عند :hover أو عبر فئة يضيفها JavaScript. وإعادتها إلى running تكمل الحركة من حيث توقفت.

Q: كيف أوقف الحركات للمستخدمين الذين يفضلون تقليل الحركة؟

أحط الحركة بـ @media (prefers-reduced-motion: no-preference) { ... }، أو احذفها داخل @media (prefers-reduced-motion: reduce) { ... }. يتبع الاستعلام إعداد تقليل الحركة في نظام تشغيل المستخدم.

حركة CSS في مثال واحد

للحركة جزءان: @keyframes، التي تصف الخطوات، والخاصية animation، التي تطبّقها على عنصر مع مدة. تنزلق هذه البطاقة وتظهر تدريجيًا عند تحميل الصفحة:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>CSS animation</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    @keyframes slide-in {
      from { opacity: 0; transform: translateY(20px); }
      to   { opacity: 1; transform: translateY(0); }
    }
    .card {
      padding: 16px;
      border-radius: 8px;
      background: #2563eb;
      color: white;
      animation: slide-in 0.6s ease-out both;
    }
    /* Keep only the fade for people who asked for less motion */
    @media (prefers-reduced-motion: reduce) {
      @keyframes slide-in { from { opacity: 0; } to { opacity: 1; } }
    }
  </style>
</head>
<body>
  <div class="card">Hello! This card animated in.</div>
</body>
</html>

عدّل الشيفرة (أو غيّر المدة إلى 2s) فتُعاد المعاينة، وتستطيع مشاهدة البطاقة تدخل مرة أخرى. تستبدل كتلة @media (prefers-reduced-motion: reduce) الإطارات المفتاحية بتلاشٍ فقط للقراء الذين ضبطوا أنظمتهم على تقليل الحركة.

صيغة @keyframes

@keyframes pulse {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.08); }
  100% { transform: scale(1); }
}

from هي نفسها 0%، وto هي نفسها 100%.
أضف من الخطوات المئوية ما تحتاج. الخطوات ذات الأنماط نفسها يمكن أن تشترك في سطر: 0%, 100% { ... }.
الخاصية الغائبة عن الإطار المفتاحي الأول أو الأخير تُحرَّك من قيمة العنصر نفسه أو إليها.
الاسم (pulse) هو ما تمرره إلى animation-name. حساس لحالة الأحرف ويجب ألا يكون كلمة مفتاحية مثل none.

خصائص animation

الخاصية	ما تضبطه	الافتراضي
`animation-name`	أي `@keyframes` تُشغَّل	`none`
`animation-duration`	طول الدورة الواحدة	`0s`
`animation-timing-function`	منحنى السرعة بين الإطارات المفتاحية	`ease`
`animation-delay`	الانتظار قبل الدورة الأولى (القيمة السالبة تبدأ من منتصف الطريق)	`0s`
`animation-iteration-count`	عدد الدورات، أو `infinite`	`1`
`animation-direction`	`normal`، `reverse`، `alternate`، `alternate-reverse`	`normal`
`animation-fill-mode`	الأنماط قبل الحركة وبعدها: `none`، `forwards`، `backwards`، `both`	`none`
`animation-play-state`	`running` أو `paused`	`running`

يقبلها الاختصار بأي ترتيب تقريبًا. القاعدة الوحيدة أن قيمة الزمن الأولى هي المدة والثانية هي التأخير:

.loader {
  animation: pulse 1.2s ease-in-out 0.2s infinite alternate both;
  /*         name  duration timing  delay count   direction fill */
}

direction وfill-mode مباشرة

اختر اتجاهًا ونمط تعبئة وعددًا، ثم اضغط Play. يتحرك الصندوق 200px إلى نهاية المسار. وتخبرك القراءة أين استقر بعد انتهاء الحركة:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>direction and fill-mode</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 14px; }
    @keyframes move {
      from { transform: translateX(0); background: #2563eb; }
      to   { transform: translateX(200px); background: #16a34a; }
    }
    .track { width: 240px; background: #f3f4f6; margin: 10px 0; }
    #box { width: 40px; height: 40px; background: #f59e0b; }
    .controls { display: flex; flex-wrap: wrap; gap: 10px; }
  </style>
</head>
<body>
  <div class="controls">
    <label>direction <select id="dir"><option>normal</option><option>reverse</option><option>alternate</option></select></label>
    <label>fill-mode <select id="fill"><option>none</option><option>forwards</option><option>backwards</option><option>both</option></select></label>
    <label>count <select id="count"><option>1</option><option>2</option></select></label>
    <button id="play">Play</button>
  </div>
  <div class="track"><div id="box"></div></div>
  <p id="out">The amber color is the box's own style, used whenever no keyframe applies.</p>
  <script>
    const box = document.getElementById('box');
    const val = (id) => document.getElementById(id).value;
    document.getElementById('play').addEventListener('click', () => {
      box.style.animation = 'none';
      box.offsetWidth; // restart: let the browser see the animation removed
      box.style.animation = 'move 1s ease-in-out ' + val('count') + ' ' + val('dir') + ' ' + val('fill');
    });
    box.addEventListener('animationend', () => {
      const x = new DOMMatrix(getComputedStyle(box).transform).m41;
      document.getElementById('out').textContent = 'Finished at x = ' + Math.round(x) + 'px, color ' + getComputedStyle(box).backgroundColor;
    });
  </script>
</body>
</html>

ما يجب ملاحظته:

fill-mode: none (الافتراضي): بعد الإطار الأخير يقفز الصندوق عائدًا إلى x = 0 ويعود كهرمانيًا.
forwards: يبقى على الإطار المفتاحي الأخير. مع normal يكون ذلك x = 200 وأخضر؛ ومع reverse ينتهي عند x = 0 وأزرق، لأن الإطار المفتاحي الأخير الذي شُغّل هو from.
alternate مع عدد 2 يذهب ويعود، فحتى forwards تنتهي عند x = 0.

حلقات لا نهائية: مؤشر تحميل

تكرر infinite بلا توقف، وanimation-delay على كل ابن تزيحها كي تتحرك بالتناوب. اجعل الحلقات هادئة: بطيئة، وصغيرة، وبلا وميض.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Loading dots</title>
  <style>
    @keyframes bounce {
      0%, 80%, 100% { transform: scale(0.6); opacity: 0.4; }
      40%           { transform: scale(1);   opacity: 1; }
    }
    .dots { display: flex; gap: 8px; padding: 12px; }
    .dots span {
      width: 14px;
      height: 14px;
      border-radius: 50%;
      background: #2563eb;
      animation: bounce 1.4s ease-in-out infinite;
    }
    .dots span:nth-child(2) { animation-delay: 0.2s; }
    .dots span:nth-child(3) { animation-delay: 0.4s; }
    @keyframes fade {
      0%, 80%, 100% { opacity: 0.4; }
      40%           { opacity: 1; }
    }
    @media (prefers-reduced-motion: reduce) {
      .dots span { animation-name: fade; } /* no size change, only a soft fade */
    }
  </style>
</head>
<body>
  <div class="dots" role="status" aria-label="Loading"><span></span><span></span><span></span></div>
</body>
</html>

تخبر role="status" مع aria-label مستخدمي قارئات الشاشة بأن شيئًا ما قيد التحميل، وهو ما لا تقوله النقاط وحدها. للدائرة الدوارة راجع صفحة rotate.

الإيقاف المؤقت والتحكم في الحركات

تجمّد animation-play-state: paused الحركة حيث هي، وrunning تكملها من هناك. مرّر المؤشر فوق الشريط أدناه لإيقافه مؤقتًا:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Pause on hover</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    @keyframes slide {
      from { transform: translateX(0); }
      to   { transform: translateX(260px); }
    }
    .track { width: 300px; padding: 6px 0; background: #f3f4f6; }
    .bar { width: 40px; height: 24px; border-radius: 4px; background: #16a34a; animation: slide 3s ease-in-out infinite alternate; }
    .track:hover .bar { animation-play-state: paused; }
  </style>
</head>
<body>
  <div class="track"><div class="bar"></div></div>
  <p>Hover the gray track to pause.</p>
</body>
</html>

من JavaScript تعيد element.getAnimations() حركات CSS الجارية، ولكل منها pause() وplay() وcancel() وcurrentTime تستطيع قراءتها أو ضبطها. يُطلق الحدث animationend حين تنتهي حركة غير لا نهائية، وanimationiteration في نهاية كل دورة.

احترم تقليل الحركة ولا تستخدم الوميض أبدًا

قاعدتان لسهولة الوصول تنطبقان على كل حركة:

تقليل الحركة. يمكن للناس أن يطلبوا من أنظمتهم حركة أقل لأن الحركة تُتعبهم. النمط الأكثر أمانًا أن تضيف الحركة فقط حين لا يطلبون تقليلها:

@media (prefers-reduced-motion: no-preference) {
  .hero-title { animation: slide-in 0.8s ease-out both; }
}

لا وميض. المحتوى الذي يومض أكثر من ثلاث مرات في ثانية واحدة قد يسبب نوبات صرع. تجنب الوميض السريع عالي التباين تمامًا.

اجعل الحركات سلسة

حرّك transform وopacity حين تستطيع. يستطيع المتصفح تطبيقهما من دون إعادة ترتيب الصفحة، فتبقيان سلستين حتى على الهواتف البطيئة. تحريك width أو height أو top أو left أو margin يعيد حساب التخطيط في كل إطار. لتحريك عنصر استخدم translate() من صفحة transform.

أخطاء شائعة

لا مدة. لا تفعل animation: fade; شيئًا، لأن المدة الافتراضية 0s.
اسم غير مطابق. يجب أن يطابق animation-name اسم @keyframes تمامًا، بما في ذلك حالة الأحرف.
القفز عائدًا في النهاية. أضف forwards (أو both) للاحتفاظ بالإطار المفتاحي الأخير.
وميض قبل بدء حركة مؤجلة. أثناء animation-delay يُظهر العنصر أنماطه العادية. تطبّق backwards (أو both) الإطار المفتاحي الأول أثناء التأخير.
إعادة تشغيل حركة بضبط القيمة نفسها. ضبط animation نفسها مرة أخرى لا يفعل شيئًا. احذفها، وافرض إعادة حساب التخطيط (el.offsetWidth)، ثم اضبطها من جديد، كما يفعل زر Play أعلاه.
تحريك display. تتبدل فورًا. حرّك opacity وtransform بدلًا منها.

الأسئلة الشائعة

كيف أصنع حركة في CSS؟

عرّف الخطوات بـ @keyframes name { from { ... } to { ... } }، ثم طبّقها على عنصر بالخاصية animation مع مدة: animation: name 1s ease-out;. المدة مطلوبة، لأن قيمتها الافتراضية 0s.

ماذا تفعل animation-fill-mode: forwards؟

تحتفظ بأنماط الإطار المفتاحي الأخير بعد انتهاء الحركة. من دونها يقفز العنصر عائدًا إلى أنماطه العادية. تطبّق backwards الإطار المفتاحي الأول أثناء التأخير، وboth تفعل الأمرين.

كيف أجعل حركة CSS تتكرر إلى الأبد؟

اضبط animation-iteration-count: infinite، أو أضف infinite إلى الاختصار: animation: spin 1s linear infinite;. أضف alternate لتشغيلها إلى الأمام ثم إلى الخلف في كل دورة.

ما الفرق بين animation وtransition في CSS؟

يحرّك الانتقال خاصية بين قيمتين حين تتغير، عادةً عند التمرير أو تغيير فئة. أما الحركة فتعمل من تلقاء نفسها بمجرد تطبيقها، ويمكن أن تكون لها أي عدد من الإطارات المفتاحية، ويمكن أن تتكرر وتنعكس وتتوقف مؤقتًا.

كيف أوقف حركة CSS مؤقتًا؟

اضبط animation-play-state: paused على العنصر، مثلًا عند :hover أو عبر فئة يضيفها JavaScript. وإعادتها إلى running تكمل الحركة من حيث توقفت.

كيف أوقف الحركات للمستخدمين الذين يفضلون تقليل الحركة؟

أحط الحركة بـ @media (prefers-reduced-motion: no-preference) { ... }، أو احذفها داخل @media (prefers-reduced-motion: reduce) { ... }. يتبع الاستعلام إعداد تقليل الحركة في نظام تشغيل المستخدم.

مفاهيم ذات صلة