תכונות CSS הקשורות לאנימציות
מאמר זה מסביר על תכונות CSS הקשורות לאנימציות.
תוכלו ללמוד על השימוש והתצורה של תכונות @keyframes, animation ו-transition.
YouTube Video
HTML לתצוגה מקדימה
css-animation.html
1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>CSS Properties Example</title>
7 <link rel="stylesheet" href="css-base.css">
8 <link rel="stylesheet" href="css-animation.css">
9</head>
10<body>
11 <!-- Header -->
12 <header>
13 <h1>CSS Properties For Animation</h1>
14 </header>
15
16 <!-- Main content -->
17 <main>
18 <header>
19 <h2>Animation Related Properties</h2>
20 </header>
21 <article>
22 <h3>@keyframes</h3>
23 <section>
24 <h4>Animation Examples</h4>
25 <header><h4>animation: slide 3s ease infinite</h4></header>
26 <section class="sample-view">
27 <div class="box-animation-slide">Slide Box</div>
28 </section>
29 <header><h4>animation: color-change 3s ease infinite</h4></header>
30 <section class="sample-view">
31 <div class="box-animation-color-change">Color Change Box</div>
32 </section>
33 <header><h4>animation: fade 3s ease infinite</h4></header>
34 <section class="sample-view">
35 <div class="box-animation-fade">Fade Box</div>
36 </section>
37 </section>
38 </article>
39 <article>
40 <h3>animation</h3>
41 <section>
42 <h4>Animation Examples</h4>
43 <header><h4>animation: slide 3s ease-in-out infinite</h4></header>
44 <section class="sample-view">
45 <div class="box-animation-ease-in-out">Slide Box</div>
46 </section>
47 <header><h4>animation: color-change 3s ease-in-out 1s 3 alternate</h4></header>
48 <section class="sample-view">
49 <div class="box-animation-alternate">Color Change Box</div>
50 </section>
51 </section>
52 </article>
53 <article>
54 <h3>transition</h3>
55 <section>
56 <h4>Transition Examples</h4>
57 <header><h4>transition: background-color 2s ease</h4></header>
58 <section class="sample-view">
59 <div class="transition-box">Hover me!</div>
60 </section>
61 <header><h4>transition: background-color 5s ease, width 0.5s ease-in</h4></header>
62 <section class="sample-view">
63 <div class="transition-2-properties">Hover me!</div>
64 </section>
65 </section>
66 </article>
67 </main>
68</body>
69</html>אנימציה ומעבר
חוק @keyframes
1/* Animation definition */
2@keyframes slide {
3 0% {
4 transform: translateX(0);
5 }
6 50% {
7 transform: translateX(200px);
8 }
9 100% {
10 transform: translateX(0);
11 }
12}
13
14/* Apply the animation */
15.box-animation-slide {
16 width: 100px;
17 height: 100px;
18 background-color: skyblue;
19 animation: slide 3s ease infinite;
20}@keyframes משמש באנימציות CSS כדי לקבוע כיצד הסגנונות משתנים במהלך האנימציה. @keyframes, שינויי הסגנון מההתחלה ועד הסוף של האנימציה מוגדרים באמצעות אחוזי זמן או מילות מפתח (from ו-to).
- זהו דוגמה לאנימציה שבה אלמנט זז משמאל לימין וחוזר למיקומו המקורי.
- בדוגמה זו,
slideנכתב אחרי@keyframes, ומגדיר אנימציה בשםslide. 0%הוא תחילת האנימציה, כאשרtranslateX(0)מציב את האלמנט במקום המקורי שלו.50%הוא אמצע האנימציה, שבו האלמנט זז 200 פיקסלים ימינה בעזרתtranslateX(200px).100%הוא סוף האנימציה, כשהאלמנט חוזר למיקומו המקורי.- במחלקת
box-animation-slide, תכונתanimationמשמשת להחיל את האנימציהslideבמרווחים של 3 שניות.
1@keyframes color-change {
2 0% {
3 background-color: red;
4 }
5 25% {
6 background-color: blue;
7 }
8 50% {
9 background-color: green;
10 }
11 75% {
12 background-color: yellow;
13 }
14 100% {
15 background-color: red;
16 }
17}
18
19.box-animation-color-change {
20 width: 100px;
21 height: 100px;
22 background-color: skyblue;
23 animation: color-change 3s ease infinite;
24}- תוכלו לשלוט בצורה עדינה על הסגנונות במהלך האנימציה. באמצעות ציון אחוזים, תוכלו להחיל סגנונות שונים בזמנים מוגדרים.
- בדוגמה זו, הצבע משתנה בהדרגה מאדום לכחול, לירוק, לצהוב וחוזר לאדום.
1@keyframes fade {
2 from {
3 opacity: 0;
4 }
5 to {
6 opacity: 1;
7 }
8}
9
10.box-animation-fade {
11 width: 100px;
12 height: 100px;
13 background-color: blue;
14 animation: fade 3s ease infinite;
15}- בדוגמה זו,
fromשווה ערך ל-0%ו-toשווה ערך ל-100%. זאת מאפשרת לכם להגדיר אנימציות פשוטות.
תחביר בסיסי
1@keyframes animation-name {
2 0% {
3 /* Style at the start */
4 }
5 50% {
6 /* Style at the midpoint */
7 }
8 100% {
9 /* Style at the end */
10 }
11}animation-name: שם האנימציה. זה מוגדר באמצעות המאפייןanimationאו המאפייןanimation-name.- אחוזים או מילות מפתח: השתמשו באחוזים מ-
0%עד100%, או מילות המפתחfrom(שווה ערך ל-0%) ו-to(שווה ערך ל-100%).
תכונת animation
1.box-animation-ease-in-out {
2 width: 100px;
3 height: 100px;
4 background-color: skyblue;
5 animation: slide 3s ease-in-out infinite;
6}מאפיין animation משמש ליישום אנימציות על אלמנט. אנימציות מגדירות כיצד מערך של סגנונות CSS משתנה לאורך זמן. עם מאפיין animation, ניתן לשלוט על התזמון, ההתנהגות, העיכוב, מספר החזרות ועוד באנימציה.
- המחלקה
box-animation-ease-in-outמגדירה אתslideכ-animation-nameומשתמשת באנימציהslideשמוגדרת ב-@keyframes.3sהוא ה-animation-duration, כלומר כל מחזור של אנימציה הושלם תוך 3 שניות.ease-in-outהוא ה-animation-timing-function, שגורם לאנימציה להתחיל באיטיות, להאיץ ואז להאט שוב בסיום.infiniteהוא ה-animation-iteration-count, כלומר האנימציה תחזור על עצמה ללא הגבלה.
1.box-animation-alternate {
2 width: 100px;
3 height: 100px;
4 background-color: skyblue;
5 animation: color-change 3s ease-in-out 1s 3 alternate;
6}- המחלקה
box-animation-alternateמגדירה אתcolor-changeכ-animation-nameומשתמשת באנימציהcolor-changeשמוגדרת ב-@keyframes.1sאחריease-in-outהוא ה-animation-delay, שקובע את העיכוב לפני שהאנימציה מתחילה. האנימציה תתחיל שנייה לאחר מכן.3אחרי1sהוא ה-animation-iteration-count, כלומר שהאנימציה חוזרת על עצמה 3 פעמים.alternateהוא ה-animation-direction, שקובע את כיוון הפעלת האנימציה.alternateמגדיר שהאנימציה תפעל לסירוגין.
הרכב מאפיין ה-animation.
מאפיין animation הוא מאפיין מקוצר שמאחד מספר תת-מאפיינים לאחד. להלן תת-המאפיינים העיקריים:.
- מאפיין
animation-name: מגדיר את שם האנימציה שתוחל. הוא חייב להתאים לשם האנימציה שהוגדרה ב-@keyframes. - מאפיין
animation-duration: מגדיר את הזמן הנדרש כדי שהאנימציה תסיים מחזור אחד. יחידות הזמן הן שניות (s) או מילישניות (ms). - מאפיין
animation-timing-function: מגדיר את עקומת המהירות של האנימציה. משתמשים בערכים כמוease,linear,ease-in,ease-out,ease-in-outוכו'.- הגדרת
easeמתחילה את האנימציה באיטיות, מאיצה אותה, ואז מאטה שוב לבסוף. - הגדרת
linearגורמת לאנימציה להתקדם במהירות קבועה מתחילתה ועד סופה. - הגדרת
ease-inמתחילה את האנימציה באיטיות ומסיימת אותה במהירות. - הגדרת
ease-outמתחילה את האנימציה במהירות ומסיימת אותה באיטיות. - הגדרת
ease-in-outמתחילה באיטיות, מתקדמת במהירות, ומסתיימת באיטיות.
- הגדרת
- תכונת
animation-delayמגדירה את העיכוב לפני שהאנימציה מתחילה. יחידת הזמן היא שניות או אלפיות השנייה. - תכונת
animation-iteration-countמגדירה את מספר הפעמים שהאנימציה צריכה לחזור. הגדרתinfiniteתחזור על האנימציה ללא הגבלת זמן. - תכונת
animation-directionמגדירה את כיוון ההשמעה של האנימציה. האפשרויות כוללות:normal(כיוון קדימה),reverse(כיוון אחורה),alternate(נגן לסירוגין), ו-alternate-reverse(נגן לסירוגין החל בכיוון אחורה). - תכונת
animation-fill-modeמגדירה את מצב האנימציה לפני שהיא מתחילה ואחרי שהיא מסתיימת. ניתן להגדיר אחת מ-none,forwards,backwards, אוboth. - תכונת
animation-play-stateמגדירה אם האנימציה פועלת או מושהית. ניתן להגדירrunningאוpaused.
סיכום
תכונת animation היא כלי רב עוצמה לשינוי דינמי של הסגנון של אלמנטים. באמצעות @keyframes, ניתן להגדיר כיצד סגנונות משתנים לאורך הזמן ולשלוט בהתנהגות המפורטת של האנימציה עם כל תת-תכונה של animation.
תכונת transition
1.transition-box {
2 background-color: lightgray;
3 transition: background-color 2s ease;
4}
5
6.transition-box:hover {
7 background-color: steelblue;
8}
9
10.transition-2-properties {
11 background-color: lightgray;
12 width: 150px;
13 height: 50px;
14 transition: background-color 5s ease, width 0.5s ease-in;
15}
16
17.transition-2-properties:hover {
18 background-color: blue;
19 width: 250px;
20}תכונת transition משמשת להחלת אפקטי אנימציה על שינויים בסגנון CSS. תכונה זו מאפשרת לבצע שינויים בצורה חלה במהלך שינויים במצב כמו hover, focus, active, או כאשר סגנונות משתנים דינמית על ידי JavaScript.
הבה נבחן דוגמה של מחלקת transition-box שבה צבע הרקע משתנה באופן חלק כאשר מצביעים על כפתור.
- במחלקת transition-box, תכונת transition מיישמת מעבר של 2 שניות לשינוי צבע הרקע. השינוי מוגדר כ- ease, מה שהופך אותו לחלק.
- הפסאודו-מחלקה hover משנה את צבע הרקע מ- lightgray ל- steelblue כאשר מצביעים על הכפתור. שינוי זה מתרחש בצורה חלקה לאורך 2 השניות שהוגדרו במחלקת transition-box.
ניתן להחיל את transition על מספר תכונות בו זמנית.
- בדוגמת מחלקת transition-2-properties, צבע הרקע משתנה ב- 5 שניות והרוחב משתנה ב- 0.5 שניות.
תחביר בסיסי
1/* Basic syntax of transition */
2transition: property duration timing-function delay;- ה-
propertyמציין לאילו מאפייני CSS יש להחיל את האנימציה. הגדרתallמחילה את האנימציה על כל המאפיינים. - ה-
durationמציין את משך הזמן שלוקח לאנימציה להסתיים. ציין באמצעות שניות (s) או אלפיות השנייה (ms). - ה-
timing-functionמציין את שינוי המהירות של האנימציה. ניתן להשתמש באפשרויות כמוease,linear,ease-in,ease-out,ease-in-out, וכו'. - ה-
delayמציין את זמן ההשהיה לפני תחילת האנימציה. ציין בשניות או באלפיות השנייה.
מאפיינים מפורטים של transition
1/* Detailed properties of transition */
2transition-property: background-color;
3transition-duration: 0.3s;
4transition-timing-function: ease;
5transition-delay: 500ms;ניתן להשתמש ב-transition גם כמאפיינים בודדים באופן הבא.
transition-property: מציין את המאפיין שעליו מוחלת האנימציה.transition-duration: מציין את משך הזמן עד לסיום האנימציה.transition-timing-function: מציין את מהירות ההתפתחות של האנימציה. ניתן להשתמש באפשרויות כמוease,linear,ease-in,ease-out,ease-in-out.transition-delay: מציין את זמן ההשהיה לפני תחילת האנימציה.
תוכלו לעקוב אחר המאמר שלמעלה באמצעות Visual Studio Code בערוץ היוטיוב שלנו. נא לבדוק גם את ערוץ היוטיוב.