CSS לעומת אנימציות JavaScript

אפשר ליצור אנימציה באמצעות CSS או JavaScript. באיזו שיטה כדאי להשתמש ומדוע?

Paul Lewis

Sam Thorogood

יש שתי דרכים עיקריות ליצור אנימציות באינטרנט: באמצעות CSS ו-JavaScript. הבחירה תלויה בגורמים אחרים בפרויקט, ובסוגי האפקטים שאתם מנסים להשיג.

סיכום

• כדאי להשתמש באנימציות CSS למעברים פשוטים יותר מסוג 'קליק אחד', כמו החלפת מצבים של רכיבי ממשק משתמש.
• כדאי להשתמש באנימציות של JavaScript כשרוצים להוסיף אפקטים מתקדמים כמו קפיצה, עצירה, השהיה, חזרה אחורה או האטה.
• אם בחרתם ליצור אנימציה באמצעות JavaScript, השתמשו ב-Web Animations API או בסביבת פיתוח מודרנית שמתאימה לכם.

אפשר ליצור את רוב האנימציות הבסיסיות באמצעות CSS או JavaScript, אבל מידת המאמץ והזמן שדרושים לכך שונה (ראו גם ביצועים של CSS לעומת JavaScript). לכל אחת מהאפשרויות האלה יש יתרונות וחסרונות, אבל אלה הנחיות טובות:

• כדאי להשתמש ב-CSS כשיש מצבים קטנים יותר ומכילים את עצמם לאלמנטי ממשק המשתמש. מעברים ואנימציות של CSS הם אידיאליים להצגת תפריט ניווט מהצד או להצגת תיבת עזרה. יכול להיות שבסופו של דבר תשתמשו ב-JavaScript כדי לשלוט במצבים, אבל האנימציות עצמן יהיו ב-CSS.
• משתמשים ב-JavaScript כשצריך שליטה משמעותית באנימציות. Web Animations API הוא הגישה המבוססת על תקנים, שזמינה היום ברוב הדפדפנים המודרניים. כך אפשר ליצור אובייקטים אמיתיים, שמתאימים לאפליקציות מורכבות שמבוססות על אובייקטים. אפשר להשתמש ב-JavaScript גם כדי להפסיק, להשהות, להאט או להפוך את האנימציות.
• משתמשים ב-requestAnimationFrame ישירות כשרוצים לתזמר סצנה שלמה באופן ידני. זוהי גישה מתקדמת ל-JavaScript, אבל היא יכולה להיות שימושית אם אתם יוצרים משחק או מציירים על לוח HTML.

לחלופין, אם אתם כבר משתמשים במסגרת JavaScript שכוללת פונקציונליות של אנימציה, כמו באמצעות השיטה .animate() של jQuery או TweenMax של GreenSock, יכול להיות שיהיה לכם נוח יותר להשתמש בה לצורך האנימציות.

אנימציה באמצעות CSS

אנימציה באמצעות CSS היא הדרך הפשוטה ביותר להציג תנועה במסך. הגישה הזו נקראת הצהרתית כי אתם מציינים מה אתם רוצים שיקרה.

בהמשך מופיע קוד CSS שנע רכיב 100px גם בציר X וגם בציר Y. כדי לעשות זאת, משתמשים במעבר CSS שמוגדר להימשך 500ms. כשמוסיפים את הכיתה move, הערך של transform משתנה והמעבר מתחיל.

.box {
  transform: translate(0, 0);
  transition: transform 500ms;
}

.box.move {
  transform: translate(100px, 100px);
}

רוצים לנסות?

בנוסף למשך המעבר, יש אפשרויות להחלקה, שהיא למעשה התחושה של האנימציה. מידע נוסף על עקומות האטה זמין במדריך היסודות של עקומות האטה.

אם, כמו בקטע הקוד שלמעלה, יוצרים כיתות CSS נפרדות לניהול האנימציות, אפשר להשתמש ב-JavaScript כדי להפעיל או להשבית כל אנימציה:

box.classList.add('move');

כך תוכלו לשמור על איזון בין האפליקציות. אתם יכולים להתמקד בניהול המצב באמצעות JavaScript, ולהגדיר את הכיתות המתאימות על רכיבי היעד, ולהשאיר לדפדפן לטפל באנימציות. אם תבחרו באפשרות הזו, תוכלו להאזין לאירועים מסוג transitionend ברכיב, אבל רק אם אתם יכולים לוותר על תמיכה בגרסאות ישנות יותר של Internet Explorer. גרסה 10 הייתה הגרסה הראשונה שתומכת באירועים האלה. כל שאר הדפדפנים תומכים באירוע כבר זמן מה.

קוד ה-JavaScript הנדרש להאזנה לסיום של מעבר נראה כך:

var box = document.querySelector('.box');
box.addEventListener('transitionend', onTransitionEnd, false);

function onTransitionEnd() {
    // Handle the transition finishing.
}

בנוסף לשימוש במעברים ב-CSS, אפשר גם להשתמש באנימציות ב-CSS. כך תוכלו לשלוט הרבה יותר טוב במפתחות האנימציה, במרווחי הזמן ובחזרות של כל אנימציה.

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

.box {
  animation-name: movingBox;

  animation-duration: 1300ms;

  animation-iteration-count: infinite;

  animation-direction: alternate;
}

@keyframes movingBox {
  0% {
    transform: translate(0, 0);
    opacity: 0.3;
  }

  25% {
    opacity: 0.9;
  }

  50% {
    transform: translate(100px, 100px);
    opacity: 0.2;
  }

  100% {
    transform: translate(30px, 30px);
    opacity: 0.8;
  }
}

רוצים לנסות?

באנימציות CSS, מגדירים את האנימציה עצמה בנפרד מהאלמנט היעד, ומשתמשים במאפיין animation-name כדי לבחור את האנימציה הנדרשת.

אם אתם רוצים שהאנימציות ב-CSS יפעלו בדפדפנים ישנים יותר, תצטרכו להוסיף תחילית של ספק. יש הרבה כלים שיכולים לעזור לכם ליצור את הגרסאות עם הקידומת של קובץ ה-CSS הדרוש לכם, וכך לכתוב את הגרסה ללא הקידומת בקובצי המקור.

אנימציה באמצעות JavaScript ו-Web Animations API

בהשוואה, יצירת אנימציות באמצעות JavaScript מורכבת יותר מכתיבת מעברים או אנימציות ב-CSS, אבל בדרך כלל היא מספקת למפתחים הרבה יותר כוח. אפשר להשתמש ב-Web Animations API כדי ליצור אנימציות של מאפייני CSS ספציפיים או ליצור אובייקטים של אפקטים שאפשר לשלב.

אנימציות JavaScript הן חיוניות, כי כותבים אותן בתוך הקוד. אפשר גם להכיל אותם בתוך אובייקטים אחרים. בהמשך מופיע קוד ה-JavaScript שצריך לכתוב כדי ליצור מחדש את המעבר ב-CSS שמתואר למעלה:

var target = document.querySelector('.box');
var player = target.animate([
    {transform: 'translate(0)'},
    {transform: 'translate(100px, 100px)'}
], 500);
player.addEventListener('finish', function() {
    target.style.transform = 'translate(100px, 100px)';
});

כברירת מחדל, אנימציות אינטרנט משנות רק את הצגת הרכיב. אם רוצים שהאובייקט יישאר במיקום שאליו הוא הועבר, צריך לשנות את הסגנונות הבסיסיים שלו בסיום האנימציה, לפי הדוגמה שלנו.

רוצים לנסות?

Web Animations API הוא תקן חדש יחסית של W3C. הוא נתמך באופן מובנה ברוב הדפדפנים המודרניים. בדפדפנים מודרניים שלא תומכים ב-WebGL, יש polyfill זמין.

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