@keyframes fadeIn {
0% { opacity: 0; }
100% { opacity: 1; }
}
.animated-element {
animation: fadeIn 0.6s ease 1 both;
}מהו מחולל האנימציה של CSS?
מחולל האנימציה של CSS הוא עורך חזותי עבור אנימציות של CSS keyframe. אתה בוחר הגדרה מראש של תנועה כגון דהייה פנימה, שקופית, זום, הקפצה, ספין או דופק, מתאים את משך הזמן, פונקציית התזמון, ההשהיה, ספירת האיטרציות, כיוון ומצב מילוי, צפה בה פועלת בתצוגה מקדימה חיה, ואז העתק שני דברים: כלל @keyframes שמגדיר את התנועה ואת קיצור האנימציה שמנגן אותה. זה הופך בלוק של CSS שרוב האנשים מעתיקים מהזיכרון או ממסגרת למשהו שאתה יכול לעצב ולראות לפני שהוא מגיע לגיליון הסגנונות שלך.
לאנימציית CSS יש שני חצאים שחייבים להסכים. כלל @keyframes שם רצף של שלבים, כל אחד כתוב כאחוז היסט עם ערכי המאפיינים שהאלמנט צריך להחזיק באותה נקודה, למשל 0% באטימות 0 ו-100% באטימות 1. מאפיין האנימציה מתייחס לשם המפתח הזה ושולט איך הוא משחק: כמה זמן הוא נמשך, איך הוא מקל, כמה זמן לחכות לפני שמתחילים, כמה פעמים לחזור, ואיזה כיוון כל מעבר פועל שם שגוי באיות הוא הסיבה הנפוצה ביותר לכך שאנימציה לא עושה כלום בשקט, כי לדפדפן אין כלל להיקשר אליו.
הכל פועל בדפדפן שלך בחר הגדרה מראש, גרור את מחווני משך הזמן וההשהיה, החלף את עקומת ההקלה, הגדר את האנימציה לחזור לנצח או מספר קבוע של פעמים, ולחץ על הפעלה חוזרת כדי לצפות בה שוב הכלי כותב את הקיצור בסדר בטוח עם שם מסגרת המפתח תחילה, מפיל את ההשהיה כאשר הוא אפס, ומשמיט כל חלק שתואם את ברירת המחדל שלו ב-CSS כך שהפלט יישאר קריא. אין חשבון, שום דבר לא מועלה, והמחולל ממשיך לעבוד לאחר טעינת הדף.
זה גם הופך את פשרות הביצועים לגלויות. הטרנספורמציה והאטימות המונפשות המוגדרות מראש בכל מקום אפשרי, מכיוון ששני המאפיינים הללו מטופלים על ידי הקומפוזיטור ואינם מאלצים את הדפדפן לחשב מחדש את הפריסה, כך שהם נשארים חלקים בקצבי פריימים גבוהים. הנפשת רוחב, גובה, חלק עליון או שוליים במקום מחשבת מחדש את הדף בכל פריים והיא הסיבה הרגילה לגמגום. לראות הקפצה בנויה מ-translateY ולא מלמעלה היא שיעור מהיר יותר מדוע אחד חלק מכל כמות קריאה עליו.
כיצד להשתמש ב-CSS Animation Generator?
בחר הגדרה מראש של אנימציה
בחר תנועה מהרשימה המוגדרת מראש כגון דהייה פנימה, החלקה פנימה, זום, הקפצה, סיבוב, דופק או ניעור. כל הגדרה מראש טוענת את מסגרות המפתח שלה ומשך ברירת מחדל הגיוני והקלה.
התאם את התזמון וההשמעה
הגדר את משך הזמן וההשהיה, בחר פונקציית תזמון, החליט אם האנימציה חוזרת על מספר קבוע של פעמים או אינסוף, ובחר כיוון ומצב מילוי.
תצוגה מקדימה ושידור חוזר
צפה באנימציה פועלת על אלמנט התצוגה המקדימה ולחץ על הפעלה חוזרת כדי להפעיל אותו מחדש. מכיוון שהאנימציה פועלת על הר, הפעלה חוזרת מעלה את האלמנט כך שתוכל לראות אותו בתדירות שתרצה.
העתק את ה-CSS
העתק את כלל @keyframes שנוצר ואת קיצור האנימציה יחד, ולאחר מכן הדבק אותם בגיליון הסגנונות שלך והחל את המחלקה על כל אלמנט.
תכונות מפתח
ספרייה מוגדרת מראש של מסגרת מפתח
ארבע עשרה תנועות מוכנות המכסות כניסות, יציאות ואפקטים של לולאה, החל מדהייה והחלקה ועד להקפצה, ספין, דופק, ניעור, היפוך ודופק, כל אחת מוגדרת עם עצירות מפתח אמיתיות
בקרת השמעה מלאה
הגדר משך זמן, השהייה, פונקציית תזמון, ספירת איטרציות, כיוון, מצב מילוי ומצב משחק, וראה כל שינוי המשתקף בקיצור ובתצוגה המקדימה החיה בבת אחת
מסגרות מפתח וקיצור ביחד
הפלט כולל גם את כלל @keyframes וגם את קיצור האנימציה שנקשר אליו, כך שאתה מעתיק בלוק שלם ועובד ולא חצי מאחד
פלט נקי, נכון למפרט
הקיצור נכתב עם שם מסגרת המפתח תחילה, ההשהיה ירדה כשהיא אפס, וכל ערך ברירת מחדל הושמט, כך שה-CSS שנוצר קורא את הדרך שבה היית כותב אותו ביד
Frequently Asked Questions
Related Tools
CSS Grid Generator
Build CSS Grid layouts visually. Set columns, rows, track sizes, gaps and alignment with a live preview, then copy the generated grid CSS - all in your browser.
CSS Transform Generator
Build a CSS transform from translate, rotate, scale, skew and 3D perspective with live sliders and a preview, then copy production-ready code.
CSS Transition Generator
Build a CSS transition from property, duration, timing function and delay with a live hover preview, then copy production-ready code. Supports multiple layers.
Character Counter
Count characters, words, sentences and paragraphs live as you type, estimate reading time and byte size, and check your text against social media and SEO length limits.
Comments
0 comments
No comments yet. Be the first to share your thoughts!