לאס אנימציות CSS3 אפשר לך להנפיש את המעבר בין סגנון CSS אחד למשנהו. אלה מורכבים משני מרכיבים. מצד אחד, יש לנו את הסגנון המתאר את האנימציה, ומצד שני את קבוצת המסגרות המציינת את מצבה ההתחלתי והסופי.
אנימציות CSS יש להם כמה יתרונות מכיוון שהן פשוטות למדי בהשוואה לטכניקות סקריפטים מסורתיות ולכן, אם נשתמש במקורות משאבים מעניינים ואיכותיים, העבודה תהיה קלה עוד יותר. עם זאת, זה לוקח זמן ויכול להיות קשה מאוד, ולכן מקורות משאבים אלה יכולים להועיל.
פונקצית הקלה
זה ציין מהירות אנימציה כדי להפוך אותו ליותר מציאותי. המגירה נפתחת, האצה ניתנת ולבסוף היא נבלמת. כשמשהו נופל, הוא נופל במהירות כדי לקפוץ. תוכל למצוא את הפונקציה הרצויה בדף easing.net זה. הדבר הטוב ביותר הוא שזה בשפה שלנו כך שיהיה לך קל יותר להשתמש באתר זה.
Animate.css
דן עדן חיבר א ספריית אנימציה של CSS עם יופי גדול שתוכלו להשתמש בו בפרויקטים שלכם. הפרויקט עצמו מהווה מקור השראה נהדר.
אנימציה פלוס
פס ידוע בזכות דפי המוצרים שלהם גראן קאלידד בכל האנימציות שיש בה. אחד המוחות היצירתיים שלהם מאחורי אותן אנימציות הוא בנג'מין דה קוק, שיצר ספרייה של אנימציית CSS ו- SVG שמבצעת טוב מאוד ומשקל קל; מושלם לנייד.
Hover.css
משאב דומה ל- Animate.css, Hover.css הוא a אוסף אפקטים של CSS שיש לך אותם באופן חופשי לשימוש כרצונך בפרויקטים שלך. הוא מתמקד באפקטים של רחף עבור קישורים, כפתורים, תמונות ועוד.