בפרק ד' של המדריך הבסיסי ל-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 example 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 example 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 example 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.
נעשה זאת בתוך הסוגריים של הפונקציה לפי הסדר הבא:
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 example 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 יש ללחוץ כאן
