10 CSS3 אנימציה כלים אתה צריך הפוך

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

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

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

• 38 השראה CSS3 הדגמות אנימציה
• 15 יפה אפקטים טקסט נוצר עם CSS
• 30 מגניב CSS אנימציות אתה צריך לראות
• כיצד ליצור את אפקט להקפיץ עם

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

1. CSS3Gen CSS3 אנימציה גנרטור

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

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

2. CSS הנפשת

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

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

3. Coveloping CSS אנימציה גנרטור

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

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

4. מג 'יק אנימציות

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

כל שעליך לעשות הוא להוריד את הקוד, לכלול את קובץ ה- CSS בדף ה- HTML שלך ולהוסיף את המחלקה המתאימה בעזרת jQuery באופן הבא:

 $ ('. yourdiv') .הרחף (פונקציה () $ (this) .addClass ('magictime puffIn'););

אתה יכול גם לשנות את ההגדרות של הטיימר, ולהפוך את האנימציה אינסופית בעזרת jQuery (לפרטים נוספים לראות את הקובץ readme).

5. Animate.css

Animate.css מספק לך קבוצה של מגניב, cross-browser CSS3 אנימציות. האנימציות מחולקות לקבוצות כגון מחפשי תשומת לב, כניסות מקפצות, יציאות מקפצות, כניסות דהייה ורבים אחרים, כך שבאמת אינך יכול להתלונן על חוסר ברירה.

אתה יכול להוריד את הקוד מ Github, אז אתה רק צריך להוסיף את קובץ ה- CSS לדף HTML שלך, ואת CSS רלוונטיים שיעורים אלמנטים HTML שאתה רוצה הנפשת.

6. Bounce.js

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

7. AniJS

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

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

8. אלמנטים בודדים CSS ספינר

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

9. מד מרחק

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

כדי להשתמש ב- Odometer, עליך להוסיף את קובץ ה- JavaScript ואת קובץ הנושא שנבחר לדף ה- HTML שלך, ולאחר מכן את הקובץ class = "מד מרחק" בחר את האלמנט שברצונך להפוך למכשיר מונפש. בחירה אידיאלית לייצוג חזותי של נתונים, או לביצוע “בקרוב” דף יותר המושכים את העין.

10. Snabbt.js

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

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