< התוכן שמופיע כאן מועמד לסטנדרטיזציה ב html5 יתכן וחלק מהדברים לא יעבדו כרגע על כל דפדפן >
בהמשך לפוסט על שמירת נתונים בדפדפן המשכתי עם בדיקות css. בתקינת w3c ישנן הרבה הצעות המתיחסות ל css הוספת מאפיינים, צורות עימוד חדשות ועד תוספות ושינויים תחבירים. בחרתי להתמקד בחלק קטן והוא טרנספורמציות ואנימציה .
טרנספורמציות – Transforms
סט מאפיינים שמאפשר לסובב לשנות גודל ושינויים דו ממדיים לאלמנט.
translate(80px, 80px) הקוד למעלה מתאר הסטה של 80 פיקסלים מהמיקים המקוריה
scale(1.5, 1.5)הגדלה פי 1.5 לאלמנט
rotate(45deg)סיבוב בזווית 45 מעלות
מעברים- Transitions
מעברים מאפשרים לשינוי מאפיניי css להתרחש בצורה חלקה לאורך זמן
transition-property – על איזה מאפיין יעבוד המעבר
transition-duration – משך זמן המעבר (בשניות)
אנימציות – Animation
ההבדל בין אנימציות למעברים הוא שמעברים מאפשרים שינוי מאפין לאורך זמן ואנימציות מאפשרות בנית storyboard לאנימציה , לאנימציות של תחביר חדש והן מנותקחות מהגדרת ה css של אלמנט ספציפי.
@keyframes מגדיר אנימציה חדשה , כל אנימציה מכילה ערכי from to וניתן להוסיף ערכי ביניים באחוזים
animation-name מקשר את האנימציה להגדרת ה css
מקורות (טיוטות העבודה של w3c)
