המדריך הבסיסי ל-CSS ב-HTML – פרק ד' – אנימציות

עד עתה ראינו כי 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 exemple of our basic HTML Document with links</h1>
</head>
<body>
    <p>this is an exemple 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 יש ללחוץ כאן

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

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

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

כתיבת תגובה

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

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

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