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

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