תיעוד 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

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

from זהה ל-0%, ו-to זהה ל-100%.
הוסיפו כמה שלבי אחוזים שצריך. שלבים עם אותם סגנונות יכולים לחלוק שורה: 0%, 100% { ... }.
מאפיין שחסר ב-keyframe הראשון או האחרון מונפש מהערך של האלמנט עצמו או אליו.
השם (pulse) הוא מה שמעבירים ל-animation-name. הוא רגיש לאותיות גדולות וקטנות, ואסור שיהיה מילת מפתח כמו none.

מאפייני האנימציה

מאפיין	מה הוא קובע	ברירת מחדל
`animation-name`	איזה `@keyframes` להריץ	`none`
`animation-duration`	אורך של מחזור אחד	`0s`
`animation-timing-function`	עקומת המהירות בין keyframes	`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: היא נשארת על ה-keyframe האחרון. עם normal זה x = 200 וירוק; עם reverse היא מסתיימת ב-x = 0 וכחולה, כי ה-keyframe האחרון שנוגן היה 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) כדי לשמור את ה-keyframe האחרון.
הבהוב לפני שאנימציה מושהית מתחילה. בזמן animation-delay האלמנט מציג את הסגנונות הרגילים שלו. backwards (או both) מחיל את ה-keyframe הראשון בזמן ההשהיה.
הפעלה מחדש של אנימציה על ידי הגדרת אותו ערך. הגדרה חוזרת של אותו animation לא עושה כלום. הסירו אותו, כפו reflow (el.offsetWidth), והגדירו אותו שוב, כמו שכפתור ה-Play למעלה עושה.
הנפשה של display. הוא מתחלף בבת אחת. הנפישו במקום זאת opacity ו-transform.

שאלות נפוצות

איך יוצרים אנימציה ב-CSS?

מגדירים את השלבים עם @keyframes name { from { ... } to { ... } }, ואז מחילים אותה על אלמנט עם המאפיין animation ומשך זמן: animation: name 1s ease-out;. משך הזמן הוא חובה, כי ערך ברירת המחדל שלו הוא 0s.

מה עושה animation-fill-mode: forwards?

הוא שומר את הסגנונות של ה-keyframe האחרון אחרי שהאנימציה מסתיימת. בלעדיו, האלמנט קופץ בחזרה לסגנונות הרגילים שלו. backwards מחיל את ה-keyframe הראשון בזמן ההשהיה, ו-both עושה את שניהם.

איך גורמים לאנימציית CSS לחזור על עצמה לעולם?

הגדירו animation-iteration-count: infinite, או הוסיפו infinite לקיצור: animation: spin 1s linear infinite;. הוסיפו alternate כדי לנגן אותה קדימה ואז אחורה בכל מחזור.

מה ההבדל בין animation ל-transition ב-CSS?

Transition מנפיש מאפיין בין שני ערכים כשהוא משתנה, בדרך כלל ב-hover או בשינוי מחלקה. Animation רצה מעצמה ברגע שהיא מוחלת, יכולה לכלול כל מספר של keyframes, ויכולה לחזור, להתהפך ולהיעצר.

איך עוצרים אנימציית CSS?

הגדירו animation-play-state: paused על האלמנט, למשל ב-:hover או דרך מחלקה ש-JavaScript מוסיף. החזרה ל-running ממשיכה מהנקודה שבה היא נעצרה.

איך מכבים אנימציות למשתמשים שמעדיפים תנועה מופחתת?

עטפו את האנימציה ב-@media (prefers-reduced-motion: no-preference) { ... }, או הסירו אותה בתוך @media (prefers-reduced-motion: reduce) { ... }. השאילתה עוקבת אחרי הגדרת הפחתת התנועה במערכת ההפעלה של המשתמש.

מושגים קשורים