אנימציות מתקדמות | CSS

[מוטי אורן]

מדריך ליצירת אנימציות מתקדמות באמצעות CSS

--

במדריך הזה נצטרך להתחיל להשתמש ב – rule חדש. בינתיים הכרנו את ה – rule (הכלל) font-face ואת ה – rule import, כעת נכיר את keyframes@.

בשביל להגדיר שם לאנימציה בכדי שנוכל לגשת אליה מאלמנט כלשהו ולהשתמש בה, נכתוב לאחר המילה keyframes@ את שם האנימציה, כמו בדוגמה.

@keyframes my-animation {}

בדוגמה הזאת, האנימציה שנגדיר בתוך הבלוק של הסוגריים המסולסלים, תשמר בשם 'my-animation' ונוכל לגשת אליה מכל אלמנט שנרצה להצמיד אליו את האנימציה.

בתוך הבלוק של @keyframes אנחנו מגדירים את שלבי האנימציה, כצעד ראשון נגדיר את זה באמצעות שתי מילים פשוטות שהם: 'from' ו – 'to'. כלומר, הקוד שייכנס לבלוק של ה – from יהווה את נקודת ההתחלה של האנימציה, והקוד שייכנס לבלוק של to, יהיה נקודת היציאה מהאנימציה. ניקח לצורך העניין את האלמנט div. נניח ויש ל – div שלנו צבע רקע ירוק ואנחנו רוצים שהצבע ישתנה באיטיות לצהוב, נכתוב זאת כך:

@keyframes my-animation {
  from { background-color: green; }
  to { background-color: yellow; }
}

כמובן שבשביל שה – div שלנו יכיר את האנימציה, נצטרך לקשר אותו אליה. ואת זה נעשה באמצעות התכונה animation-name.

@keyframes my-animation {
  from { background-color: green; }
  to { background-color: yellow; }
}
div {
  animation-name: my-animation;
  background-color: green;
}

כמובן שנצטרך להגדיר את הזמן של השהיית האנימציה. את זה נבצע עם תכונת animation-duration.

@keyframes my-animation {
  from { background-color: green; }
  to { background-color: yellow; }
}
div {
  animation-name: my-animation;
  animation-duration: 3s;
  background-color: green;
}

שימו לב שאם לא נכתבה התכונה דלעיל לא תתבצע שום אנימציה, משום שערך ברירת המחדל עבור התכונה הזאת הינו 0.

ניתן לעכב את תחילת פעולת האנימציה באמצעות התכונה animation-delay.

@keyframes my-animation {
  from { background-color: green; }
  to { background-color: yellow; }
}
div {
  animation-name: my-animation;
  animation-duration: 3s;
  background-color: green;
  animation-delay: 2s;
}

נוכל לקבוע את מספר הפעמים שהאנימציה תתבצע, באמצעות animation-iteration-count. בדוגמה שלהלן היא תתבצע 5 פעמים.

@keyframes my-animation {
  from { background-color: green; }
  to { background-color: yellow; }
}
div {
  animation-name: my-animation;
  animation-duration: 3s;
  animation-iteration-count: 5;
  background-color: green;
}

ניתן לתת את הערך infinite (אין סוף) בכדי שהאנימציה לא תפסיק להתבצע.

נחזור רגע ל – keyframes. במידה ונרצה לתת קצת יותר מנקודת כניסה ונקודת יציאה בלבד, נוכל להשתמש באחוזים, כך:

@keyframes my-animation {
  0% { background-color: green; }
  25% { background-color: yellow; }
  50% { background-color: red; }
  75% { background-color: blue; }
  100% { background-color: pink; }
}

ניתן להפעיל את האנימציה בכיוון ההפוך מהכיוון שנקבע ב – keyframes על ידי התכונה animation-direction:

@keyframes my-animation {
  from { background-color: green; }
  to { background-color: yellow; }
}
div {
  animation-name: my-animation;
  animation-duration: 3s;
  animation-direction: reverse;
  background-color: green;
}

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

• alternate

• alternate-reverse

הערך alternate משמעותו היא שהאנימציה תתבצע פעמיים. פעם ראשונה בסדר הקבוע מראש, ופעם שניה בסדר הפוך.

הערך alternate-reverse קובע, שהאנימציה תתבצע פעמיים, פעם ראשונה בסדר הפוך, ופעם שניה בסדר המקורי.

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

@keyframes my-animation {
  from { background-color: green; }
  to { background-color: yellow; }
}
div {
  animation-name: my-animation;
  animation-duration: 3s;
  animation-fill-mode: forwards;
  background-color: green;
}

בדוגמה הזאת, נתתי את הערך forwards, שאומר שהמצב יישאר כמו מה שנקבע לנקודת היציאה מהאנימציה.

ניתן לכתוב את כל זה בקיצור על ידי התכונה animation:

@keyframes my-animation {
  from { background-color: green; }
  to { background-color: yellow; }
}
div {
  /* animation-name, animation-duration, animation-delay, animation-iteration-count, animation-direction */
  animation: my-animation 3s 2s 5 reverse;
}

ולסיום העניין, כתבתי פה קוד לאנימציה קטנה, שווה לנסות:

HTML:

<div>
  <h1>I am learning CSS!</h1>
</div>

CSS:

div {
  width: 300px;
  height: 200px;
  background-color: lightblue;
  animation: my-animation 5s 2s 1 forwards;
}

@keyframes my-animation {
  0% {
    transform: translate(0, 0) rotate(0deg);
    background-color: lightblue;
  }
  10% {
    transform: translate(0, 0) rotate(15deg);
    background-color: lightgreen;
  }
  30% {
    transform: translate(500px, 20px) rotate(50deg);
    background-color: lightpink;
  }
  50% {
    transform: translate(500px, 20px) rotate(150deg);
    background-color: lightsalmon;
  }
  100% {
    transform: translate(0, 0) rotate(0deg);
  }
}

אפשר לראות את התוצאה של הקוד, בקישור הזה.