אנימציות CSS

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

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

מהן אנימציות?

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

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

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

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

סוגי אנימציה

ישנם סוגים שונים של אנימציה:

קריקטורה או אנימציה מסורתית

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

אנימציית סטופ - מושן

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

פיקסלים

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

רוטוסקופיה

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

אנימציה לפי Cutouts או Cut Out Animation

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

אנימציה 3D

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

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

מהו CSS?

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

ראשי תיבות CSS, עיין ב"גליונות סגנונות מדורגים". הוא מורכב משפה המשמשת בתחום העיצוב ובהצגת דפי אינטרנט, אפילו טוב יותר, הם סדרה של כלים ופקודות שאחראים על הצגת דף אינטרנט כפי שאנו רואים אותו בפעם הראשונה. ברגע שהוא כבר נוצר. עובד יחד עם הכלי HTML (מאורגן מתוכן הבסיס של הדפים).

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

בשביל מה יש CSS?

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

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

הנפשה ב-CSS

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

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

לכל אחת מהאנימציות הללו יש שורה של יתרונות:

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

הגדרות אנימציה

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

מאפייני המשנה הם:

אנימציה - עיכוב

זמן השהיה בין רגע טעינת האלמנט לתחילת רצף האנימציה.

אנימציה - כיוון

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

אנימציה - משך

מציין את משך הזמן שלוקח להנפשה להשלים את המחזור שלה (משך הזמן)

אנימציה - איטרציה - ספירה

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

אנימציה - שם

הוא משמש לציון השם שמתאר כל אחת ממסגרות האנימציה.

אנימציה - משחק - מצב

מאפשר לך להשהות ולחדש את רצף האנימציה.

אנימציה - תזמון- פונקציה

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

אנימציה - מילוי - מצב

מציין אילו ערכים יהיו למאפיינים לאחר סיום האנימציה.

הגדר את הרצף עם מסגרות

לאחר שקבענו את השעה, המינוח וכו'. זה הזמן להציע מראה או תחושה לאנימציה שלנו.

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

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

אנימציית מסגרת וטקסט

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

75% גופן - גודל: 300%; שוליים - שמאל: 25%; רוחב: 150%;

עם קוד זה, אנו מציעים לדפדפן שב-75% מהרצף, לכותרת יש שוליים שמאליים של 25% וגודל של 200% ברוחב של 150%.

אנימציה חוזרת

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

מסקנה

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

כבר העזתם?