דוגמאות למעבר CSS - כיצד להשתמש באנימציית רחף, שינוי אטימות ועוד

תִכנוּת

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

במאמר זה נלמד כיצד ליצור כמה אנימציות מעבר בסיסיות באמצעות CSS.

כיצד להנפיש אלמנט עם מעבר בסיסי על רחף

בדוגמה זו, נשנה את האטימות של אלמנט כאשר משתמש מרחף או מעל העכבר מעל האלמנט.

      Static Template   .elem { background: blueviolet; width: 300px; height: 150px; } .elem:hover { opacity: 0.5; }

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

בואו נוסיף מאפיין של שינוי קנה מידה כדי להוסיף מעבר קנה מידה לאלמנט.

 .elem:hover { transform: scale(1.1); }

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

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

 .elem { background: blueviolet; width: 300px; height: 150px; margin: 20px auto; transition: 500ms linear; }

בואו נפרט כיצד פועל נכס המעבר:

 transition: 500ms linear;
  • 500ms: משך המעבר באלפיות השנייה
  • linear: פונקציית התזמון
div { transition:    ; }

אנו יכולים להוסיף אפשרויות נוספות כמו להלן (דוגמאות מ- MDN):

#delay { transition-property: font-size; transition-duration: 4s; transition-delay: 2s; }

אז מה הקוד הזה עושה?

  • מעבר-נכס: הנכס שברצונך להנפיש. זה יכול להיות כל רכיב CSS כמו background, height, translateY, translateX, וכן הלאה.
  • משך מעבר: משך המעבר
  • עיכוב מעבר: העיכוב לפני תחילת המעבר

תוכל ללמוד עוד על השימושים השונים transitionב- CSS כאן.

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

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

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

בואו נסתכל על דוגמה בה האלמנט עובר מנקודה A לנקודה B. נשתמש בתרגום X ובתרגום Y.

      Static Template   .elem { background: orange; width: 300px; height: 150px; animation: moveToRight 2s ease-in-out; animation-delay: 1000ms; } @keyframes moveToRight { 0% { transform: translateX(0px); } 100% { transform: translateX(300px); } }

וזה מה שאנחנו מקבלים:

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

 animation: moveToRight 2s ease-in-out;

כאן קראתי לאנימציה moveToRight- אבל אתה יכול להשתמש בכל שם שאתה אוהב. משך הזמן הארוך 2s, וכן ease-in-outהוא פונקצית עיתוי.

ישנן פונקציות תזמון אחרות שאתה יכול להשתמש כמו ease-in, linear, ease-outאשר בעצם להפוך את חלקת האנימציה. תוכל ללמוד עוד על פונקציות התזמון כאן.

@keyframesלוקח את שם האנימציה. במקרה זה זה moveToRight.

 @keyframes moveToRight { 0% { transform: translateX(0px); } 100% { transform: translateX(300px); } }

keyframesיבצע את האנימציה בשלבים מרובים. הדוגמה שלמעלה משתמשת באחוזים כדי לייצג את הטווח או את סדר המעברים. נוכל גם להשתמש בשיטות fromו- to. כמו למטה "

 @keyframes moveToRight { from { transform: translateX(0px); } to { transform: translateX(300px); } }

from מייצג את נקודת ההתחלה או את השלב הראשון של האנימציה.

to היא נקודת הסיום או השלב האחרון של האנימציה שתבוצע.

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

 @keyframes moveToRight { 0% { transform: translateX(0px); } 50% { transform: translateX(150px); } 100% { transform: translateX(300px); } }

אנו יכולים להיות יצירתיים יותר ולהנפיש מאפיינים רבים במקביל כמו בדוגמה הבאה:

תוכלו לשחק עם מאפיינים וטכניקות אנימציה בארגז החול כאן:

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

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

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

      Static Template   .elem { background: orange; width: 250px; height: 250px; border-radius: 10px; animation: moveToLeft 5s linear infinite; animation-delay: 1000ms; } @keyframes moveToLeft { 0% { transform: translateX(0px); background: linear-gradient( to right, #ff8177 0%, #ff867a 0%, #ff8c7f 21%, #f99185 52%, #cf556c 78%, #b12a5b 100% ); } 25% { transform: translateX(400px); background: linear-gradient(120deg, #84fab0 0%, #8fd3f4 100%); } 50% { transform: translateY(200px) translateX(400px); background: linear-gradient(to top, #30cfd0 0%, #330867 100%); } 75% { transform: translateX(0px) translateY(200px); background: linear-gradient(120deg, #f6d365 0%, #fda085 100%); } 100% { transform: translateY(0px); } }

בואו נשבר את זה. ראשית אנו מוסיפים infiniteכדי לגרום לאנימציה לרוץ לנצח.

animation: moveToLeft 5s linear infinite;

ואז חילקנו את האנימציה לארבעה שלבים. בכל שלב נפעיל מעבר אחר וכל האנימציה תפעל ברצף.

  • First step: set the element horizontally to translateX(0px), and change the background to the gradient. 
 0% { transform: translateX(0px); background: linear-gradient( to right, #ff8177 0%, #ff867a 0%, #ff8c7f 21%, #f99185 52%, #cf556c 78%, #b12a5b 100% ); }
  • The second animation will move the element from the left to the right and change the background color.
 25% { transform: translateX(400px); background: linear-gradient(120deg, #84fab0 0%, #8fd3f4 100%); }
  • The third animation will move the element down using translateY and change the background color again.
  • In the fourth step, the element will move back to the left and change the background color.
  • In the fifth animation the element should go back to its original place.

Wrapping up

In this article, we covered various things you can do with CSS transitions. You can use CSS transitions in many ways in your applications to create a better user experience.

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

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