המדריך הבסיסי ל-CSS ב-HTML – פרק ט' – Transition

בפרק ד' של המדריך הבסיסי ל-CSS ב-HTML ראינו כיצד ביכולתנו ליצור אנימציות. ובכן, ב-CSS יש לרשותנו אפקטי תנועה נוספים – Transition למשל

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

ובכן ל-CSS יש כלים נוספים להציע, מיד נעבור על הבולטים מבינם.

טרנזיסציה – transition

באמצעות טרנזיסציה (אנימציית מעבר) נוכל לשנות ערכים של אלמנט למשך זמן מוגדר.
ל-transition יש את המאפיינים הבאים:

  • transition
  • transition-delay
  • transition-duration
  • transition-property
  • transition-timing-function

 

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="styles.css">
    <meta charset="utf-8" />
    <title>Hello, World!</title>
    <h1 style="text-shadow:0 0 5px #0000FF;">this is an exemple of our basic HTML Document with Transitions & Transforms</h1>
</head>
<body>        
 
    <h1>רחף עם העכבר מעל האלמנט על מנת לראות טרנזיסציה בפעולה</h1>
 
    <div></div><br>
         
</body>
</html>
div {
    width: 450px;
    height: 100px;
    background: rgb(199, 245, 212);
    transition: width 5s;
    font-family:"Helvetica";
    font-size:larger;
  }
div:hover {
    width: 1300px;
  }

שימו לב לקוד בקובץ ה-CSS.

  • בשורה 5 השתמשנו בתכונה transition, נתנו לה את הערך width 5s.
    זה אומר שבמשך 5 שניות תרוץ אנימציית מעבר אשר מקושרת למאפיין הרוחב – width של div.

 

  • פעולת הטרנזיסציה תפעל עד לרוחב של 1300px מהרוחב ההתחלתי, כפי שקבענו בשורה 9.

המאפיין transition-timing-function

במאפיין זה נוכל להשתמש על מנת "לרכך" או "להגביר" את תחילת התנועה של האלמנט למשל.
transition-timing-function מקבל את הערכים הבאים:

  • ease – הטרנזיסציה תתחיל לאט, תתגבר, ואז תאט שוב
  • linear – המהירות תהיה שווה מההתחלה ועד הסוף
  • ease-in – מאט את תחילת התנועה
  • ease-out – מאט את סוף התנועה
  • ease-in-out – הטרנזיסציה תהיה עם התחלה וסוף איטיים
  • cubic-bezier(n,n,n,n) -מאפשר לנו להכניס ערכים משלנו בפונקציית cubic-bezier.

 

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="my_style.css">
    <meta charset="utf-8" />
    <title>Hello, World!</title>
    <h1 style="text-shadow:0 0 5px #0000FF;">this is an exemple of our basic HTML Document with Transitions & Transforms</h1>
</head>
<body>        

    <h1>רחף עם העכבר מעל האלמנט על מנת לראות טרנזיסציה בפעולה</h1>

    <div id="id1">הטרנזיסציה תתחיל לאט, תתגבר, ואז תאט שוב - ease</div><br>
    <div id="id2">המהירות תהיה שווה מההתחלה ועד הסוף - linear</div><br>
    <div id="id3">מאט את תחילת התנועה - ease-in</div><br>
    <div id="id4">מאט את סוף התנועה - ease-out</div><br>
    <div id="id5">הטרנזיסציה תהיה עם התחלה וסוף איטיים - ease-in-out</div><br>
        
</body>
</html>
div {
  width: 450px;
  height: 100px;
  background: rgb(199, 245, 212);
  transition: width 5s;
  font-family:"Helvetica";
  font-size:larger;
}

div:hover {
  width: 1300px;
}

#id1 {transition-timing-function: linear;}
#id2 {transition-timing-function: ease;}
#id3 {transition-timing-function: ease-in;}
#id4 {transition-timing-function: ease-out;}
#id5 {transition-timing-function: ease-in-out;}
  • על מנת להשהות את תחילת הטרזיסציה, נוכל להשתמש במאפיין transition-delay:
div {
  transition-delay: 2s;
}

טרנספורמציה עם טרנזיסציה

סוג נוסף של אפקט תנועה אשר קיים ב-CSS הוא transform משולב עם transistion.
transform הוא מאפיין אשר מאפשר לנו להזיז, לסובב (בדו-ממד), להגדיל אלמנטים ועוד.
שימו לב כי כשלעצמו הוא לא יגרום לאנימציה, נשלב אותו עם transition למשל לשם כך.
בתור ערך ניתן למאפיין אחת מהפונקציות הייעודיות הבאות:

  • ()translateמזיז את האלמנט
  • ()rotate – מסובב את האלמנט (באופן דו-ממדי)
  • ()scaleXמגדיל את האלמנט על גבי ציר ה-X
  • ()scaleYמגדיל את האלמנט על גבי ציר ה-Y
  • ()scaleמגדיל את האלמנט
  • ()skewX – "מעוות" את האלמנט לפי ציר ה-X
  • ()skewY – "מעוות" את האלמנט לפי ציר ה-Y
  • ()skew – "מעוות" את האלמנט
  • ()matrix – מאחד את כל סוגי ה-transform

טרנספורמציה דו-ממדית

צרו מסמך HTML וקובץ CSS:

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="my_style.css">
    <meta charset="utf-8" />
    <title>Hello, World!</title>
    <h1 style="text-shadow:0 0 5px #0000FF;">this is an exemple of our basic HTML Document with Transitions & Transforms</h1>
</head>
<body>        

    <h1>רחף עם העכבר מעל האלמנט על מנת לראות טרנזיסציה עם טרנספורמציה בפעולה</h1>
  
    <div id="myDiv"></div>
        
</body>
</html>
div {
  width: 200px;
  height: 200px;
  margin: 20%;
  background-image: linear-gradient(rgb(226, 192, 192), rgb(102, 69, 223), rgb(68, 5, 63));
  transition: width 2s, height 2s, transform 2s;
}

div:hover {
  width: 300px;
  height: 300px;
  transform: rotate(180deg) translate(150px, 200px);
}

שימו לב כי בדוגמא זו הטרנזיסציה התבצעה על רוחב האלמנט, הגובה וה-transform שלו (שורה 6).
פעולות הטרנספורמציה שביצענו הן סיבוב (rotate) והזזה (translate).

הפונקציה ()matrix

כפי שהוסבר, בפונקציה ()matrix נוכל להשתמש על מנת לשלב את כל פעולות ה-transform.
נעשה זאת בתוך הסוגריים של הפונקציה לפי הסדר הבא:

CSS in HTML - matrix transform
CSS in HTML – matrix transform
div {
  width: 200px;
  height: 200px;
  margin: 20%;
  background-image: linear-gradient(rgb(226, 192, 192), rgb(102, 69, 223), rgb(68, 5, 63));
  transition: width 2s, height 2s, transform 6s;
}

div:hover {
  width: 300px;
  height: 300px;
  transform: matrix(1, 10, 0.5, 1, 150, 0);
}

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

טרנספורמציה עם אנימציה

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

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="my_style.css">
    <meta charset="utf-8" />
    <title>Hello, World!</title>
    <h1>אנימציה של גלגל שיניים מסתובב</h1>
</head>
<body>      
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css">
  
    <i id="gear1" class="fa fa-5x fa-gear spin"></i>
        
</body>
</html>
body{
  background: #2B2B2B;
  text-align: center; 
}
body>h1{
  text-transform: uppercase; 
  color:#F6F6F6;
  letter-spacing: .12em;
  border-bottom: 4px solid #fff;
  display:block;
  width: auto; 
  max-width: 725px;
  margin: 0px auto; 
  line-height: 1em;
  padding-bottom: .25em;
  margin-top: 1em;
}
#gear1 {
  margin: 300px;
  color: #ffffff;
  max-width: 200px;
  height: 200px;

}
.spin {
  -webkit-animation:spin 4s infinite;
  -moz-animation:spin 4s infinite;
  animation:spin 4s infinite;
}

.spin-back {
  -webkit-animation:spin-back 4s infinite;
  -moz-animation:spin-back 4s infinite;
  animation:spin-back 4s infinite;
}

@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg) translate(50px, 0px); } }
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg) translate(50px, 0px); } }
@keyframes spin { 100% { -webkit-transform: rotate(360deg) translate(50px, 0px); transform:rotate(360deg) translate(50px, 0px);}}

@-moz-keyframes spin-back { 100% { -moz-transform: rotate(-360deg) translate(-50px, 0px); } }
@-webkit-keyframes spin-back { 100% { -webkit-transform: rotate(-360deg) translate(-50px, 0px); } }
@keyframes spin-back { 100% { -webkit-transform: rotate(-360deg) translate(-50px, 0px); transform:rotate(-360deg) translate(50px, 0px);} }

 

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

טרנספורמציה תלת-ממדית

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

  • ()rotateX – מסובב את האלמנט על ציר ה-X.
  • ()rotateY – מסובב את האלמנט על ציר ה-Y.
  • ()rotateZ – מסובב את האלמנט על ציר ה-Z.

 

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="my_style.css">
    <meta charset="utf-8" />
    <title>Hello, World!</title>
    <h1 style="text-shadow:0 0 5px #0000FF;">this is an exemple of our basic HTML Document with Transitions & Transforms</h1>
</head>
<body>        

    <h1>רחף עם העכבר מעל האלמנט על מנת לראות טרנזיסציה עם טרנספורמציה בפעולה</h1>
  
    <div id="myDiv"></div>
        
</body>
</html>
div {
  width: 200px;
  height: 200px;
  margin: 20%;
  background-image: linear-gradient(rgb(226, 192, 192), rgb(102, 69, 223), rgb(68, 5, 63));
  transition: width 2s, height 2s, transform 10s;
}

div:hover {
  width: 300px;
  height: 300px;
  transform: rotateX(180deg) rotateY(10deg) rotateZ(100deg) translate(150px, 200px);
}

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

סיכום HTML & CSS Transition

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

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

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

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

רוצים לשתף את המדריך?

אהבתכם את המדריך? פתר לכם תקלה?

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

כתיבת תגובה

הזמינו אותי לכוס קפה
buy me coffee

אהבתכם את המדריך? פתר לכם תקלה? הזמינו את כותב המדריך לכוס קפה

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