Toollet
חיפוש לפי משימה או שם אפליקציהחיפושצור קשר
מחירים
תפריט
כניסהמחירים

מחולל אנימציית CSS

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

בחירת פרופיל אחר מחליפה את הגדרות ההשמעה ואת נקודות המפתח.

פרטי השמעה1× · השהיה של 0 שניות
עריכת נקודות מפתח2 נקודות

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

נבחרה: נקודה 1

ההזזה מהמיקום המקורי.

2 / 8

מה אפשר לעשות

התאימו תנועה מהגדרה מוכנה

בחרו מתוך 12 סוגים, כולל כניסות, יציאות וסיבוב. שנו את המשך ואת החזרה כדי להתאים לשימוש שלכם.

ערכו גם מצבי ביניים

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

קבלו CSS ו-HTML

העתיקו או שמרו את ה-CSS של האנימציה ודוגמת שימוש ב-HTML עם אותה מחלקה.

איך להשתמש

  1. בחרו הגדרה מוכנה

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

  2. התאימו רק את החלקים שאתם צריכים

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

  3. צרו והפעילו

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

  4. קבלו CSS ו-HTML

    החילו את ה-CSS והוסיפו את המחלקה toollet-motion לרכיב HTML. השתמשו בדוגמת השימוש ב-HTML יחד עם ה-CSS.

מתי כדאי להשתמש

צרו אנימציית כניסה

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

תנועה בעת אינטראקציה עם כפתור

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

הבנת פריימי מפתח ותנאי הפעלה

מצבים ביניים ומשך

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

תנועה, סיבוב ומראה

המיקום האופקי/אנכי הוא כמות התנועה מהמיקום המקורי. קנה מידה של 1 הוא הגודל המקורי; שקיפות של 0 היא שקופה ושקיפות של 1 היא אטומה.

השהיה, חזרה וכיוון

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

מצבים לפני ואחרי ההפעלה

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

הגדרות תנועה מופחתת

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

שאלות נפוצות

האם ניתן להפעיל אותו פעם אחת בלבד?

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

באיזה רכיב כדאי להחיל את ה-CSS?

הוסיפו את המחלקה toollet-motion לרכיב HTML והשתמשו בה עם ה-CSS שנוצר. דוגמת השימוש ב-HTML היא קטע של רכיב button, ולא דף אינטרנט עצמאי ומלא.

כמה פריימי מפתח ניתן ליצור?

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

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

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

מדוע התצוגה המקדימה אינה זזה?

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

האם ניתן להשתמש בכמה אנימציות באותה עמוד?

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

קלט ותוצאות

הגדרות
‏12 הגדרות מוכנות, 2–8 פריימי מפתח ומשך של 0.2–60 שניות.
הפעלה
השהיה של 0–60 שניות, 1–100 חזרות או חזרה אינסופית, הקלה, כיוון, מצבים לפני ואחרי ההפעלה ותנאי התחלה.
פלט
‏CSS ודוגמת שימוש ב-HTML. רק התנועה מוגדרת; דף אינטרנט מלא או קובץ וידאו אינם נוצרים.

ההגדרות הנוכחיות

חיפוש כלים