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.

לחלופין, אם אתם כבר משתמשים ב-framework של 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, יש לכם שליטה מלאה על הסגנונות של הרכיב בכל שלב. המשמעות היא שאתם יכולים להאט אנימציות, להשהות אותן, לעצור אותן, להפוך אותן ולשנות רכיבים לפי הצורך. האפשרות הזו שימושית במיוחד כשאתם מפתחים אפליקציות מורכבות שמבוססות על אובייקטים, כי אתם יכולים להכיל את ההתנהגות בצורה נכונה.