אנימציות CSS3 חלק א

בחלק זה נלמד את transform  ו TRANSITION

transform

מוסיף לנו פונקציות נוספות להצגת אלמנט.

transform: rotate(90deg) scale(1) skew(1deg) translate(10px);

Rotate

מאפשר לסובב את האלמנט מקבל מעלות

Scale

קובע לאלמנט גודל חדש מקבל ערכים מ 0-1 שהם בעצם מייצגים אחוזים. למשל 0.5 זה 50 אחוז.

Skew

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

transform: skew(-7deg, -3deg) ;

See the Pen BLgqOZ by josef arazi (@shiran) on CodePen.

Translate

מזיז את האלמנט בצורה יחסית בציר ה X ובציר ה Y

transform: translate(-56px, -26px);

 

TRANSITION

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

ה TRANSITION מקבל 2 פרמטרים עיקריים:

• שניות – כמה זמן יקח לשינוי להתמשך.
•  על איזה שינוי אני רוצה להחיל את האנימציה ( על שינוי רקע או על שינוי רוחב או על הכל all)

דוגמא לאנימציה שחלה במשך 2 שניות על שינוי של רוחב:

transition: width 2s;

אפשר לשרשר עוד

transition: width 2s, height 4s;

ואפשר להחיל על הכל

transition: all 1s;

ניתן גם לקבוע זמן השהייה ופונקצית מעבר

 transition-timing-function: linear;
transition-delay: 1s;

נרחיב על זה קצת יותר במאמר הבא.

דוגמא ל transform והחלפת צבע במעבר עכבר בלי transition :

See the Pen BLgqwp by josef arazi (@shiran) on CodePen.

דוגמא ל transform והחלפת צבע במעבר עכבר עם transition  רואים שהמעבר קצת יותר איטי:

See the Pen MjMPBB by josef arazi (@shiran) on CodePen.

אתר שמאוד נחמד לעבוד איתו נותן את הקוד ואיזה דפדפנים תומכים :

http://www.css3maker.com/

 

להמשך קריאה על אנימציות ב CSS3