עד עתה ראינו כי CSS ב-HTML הוא כלי עוצמתי, אך בנוסף לכל היכולות שראינו בפרקים הקודמים של המדריך, ניתן גם ליצור אנימציות ב-CSS
עד עתה ראינו כיצד לעצב דפי HTML באמצעות CSS – באמצעות שימוש בבוררים, תכונות וערכים.
מה אם נרצה לתת תצוגה שהיא לא סטטית (כלומר מתחלפת) לצבע הטקסט למשל?
לשם כך יש לנו יכולת ליצור אנימציות ב-CSS.
המאפיין animation
ניתן ליצור אנימציית CSS על ידי שימוש במאפיין המיוחד animation.
נשתמש כדוגמא באותו דף ה-HTML שבו השתמשנו בפרק הקודם של המדריך,
רק שכאן נוסיף בורר id לקישור כך שהצבע של הקישור יתחלף ללא הפסקה:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="my_style.css">
<meta charset="utf-8" />
<title>Hello, World!</title>
<h1 class="h1_class" style="text-shadow:0 0 5px #0000FF;">this is an example of our basic HTML Document with links</h1>
</head>
<body>
<p>this is an example of link, click <a id="text_anim" href="https://www.technow.co.il">here</a>
<br/>
<br/>
this is my image:
<br/>
<br/>
<a href="https://www.g4a.co.il/">
<img src="logo.png" alt="text" style="height: 200px; width: 300px;">
</a>
</p>
</body>
</html>
תחביר אפשרי ליצירת טקסט עם צבע מתחלף בקובץ CSS יראה כך:
.h1_class {
text-shadow: 0 0 3px #FF0000, 0 0 5px #0000FF;
}
#text_anim {
animation: example 2s infinite;
}
@keyframes example {
0% {color: rgb(0, 0, 0);}
25% {color: rgb(221, 120, 120)}
50% {color: rgb(240, 208, 27)}
75% {color: rgb(53, 142, 224)}
100% {color: rgb(38, 0, 128)}
}
אם נתעמק ב-קוד ה-CSS נוכל להבחין כי התחביר בנוי כך שראשית הכרזנו על מאפיין animation (שורה 5).
לאחר מכן נתנו שם לאנימציה שלנו – example וקבענו כי היא תרוץ במשך 2 שניות (2s) באופן אין-סופי(infinite).
בשורה 7 כתבנו את פונקציית האנימציה מחולקת ל-5 קטעים (keyframes) לפי אחוזים,
כאשר בכל שלב של האנימציה, ישתנה הערך של המאפיין color וישפיע על הבורר-id שהגדרנו.
סיכום
לסיכום ניתן לומר כי כעת אנו יודעים ליצור אנימציות CSS פשוטות על גבי דף האינטרנט שלנו והשמיים הם הגבול.
למשל אם היינו רוצים היינו יכולים להגדיר שהאנימציה תרוץ במשך זמן אחר מ-2 שניות.
יכולנו גם לחלק את האנימציה למספר שונה של פריימים (keyframes),
או\וגם שהאנימציה תהיה על מאפיין אחר מ-color.
כמו כן אנו יכולים ליצור יותר מאנימציה אחת לאלמנט מסוים כמובן.
בפרק הבא של המדריך נלמד על עיצוב טבלאות.
לקריאה מורחבת על CSS באתר הייעודי של W3C יש ללחוץ כאן
