אנימציות הן תוספת חזקה ל-CSS, אך צורת הטקסט שלהן יכולה להפוך אותן למסורבלות לעבודה. כלי DevTools של Chrome להצלה!

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

התכונה DevTools של Google Chrome וגם של Firefox מגיעה עם היכולת לבדוק את האנימציות שלך. למד כיצד להשתמש בתכונה זו כדי לשפר את האנימציות שלך ולהנדס לאחור את האנימציות המועדפות עליך באינטרנט.

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

הקוד עבור דוגמאות אלה זמין ב מאגר GitHub.

הגדר אנימציות עם HTML ו-CSS

ה-HTML הבא מציג דף עם שני אלמנטים: א וכן א. הדף מייבא גם קובץ CSS בשם style.css:

html>
<htmllang="en">
<head>
<metacharset="UTF-8">
<metaname="viewport"content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
<linkrel="stylesheet"href="style.css">
head>
<body>
<divid="box">div>
<button>Test Buttonbutton>
body>
html>
instagram viewer

כדי לעצב את שני האלמנטים, צור א style.css קובץ באותה תיקיה כמו ה-HTML והוסף את הדברים הבאים:

#box {
background: red;
height: 400px;
width: 400px;
margin-bottom: 1rem;
animation: rotateAndChangeColor 1000msease-in-out;
}
button {
font-size: larger;
background-color: white;
border: 1pxsolidblack;
padding: 0.5em 1em;
color: black;
height: 80px;
width: 300px;
border-radius: 0.5em;
transition: background-color 100msease-in-out, color 100msease-in-out;
cursor: pointer;
}


button:hover {
background-color: black;
color: white;
}


@keyframes rotateAndChangeColor {
 0% {
rotate: 0deg;
background: red;
 }
 10% {
background: green;
 }
 40% {
background: blue;
 }
 70% {
background: yellow;
 }
 100% {
rotate: 360deg;
background: red;
 }
}

סגנונות אלו יוצרים שני מרכיבים:

  • קופסה פשוטה שמסתובבת ומשנה צבע כאשר הדף נטען.
  • כפתור שמשנה את צבע הרקע שלו כשאתה מרחף מעליו.

שים לב שהתיבה האדומה מפעילה הנפשה באמצעות ה הוראת CSS @keyframe, בעוד הכפתור משתמש במעבר. זה מאפשר לך להשוות בין שתי הגישות באמצעות כלי DevTools של הדפדפן.

כדי לגשת ל אנימציות הכרטיסייה ב-Chrome DevTools:

  1. לחץ לחיצה ימנית על הדף שלך כדי להעלות את תפריט ההקשר.
  2. נְקִישָׁה לִבדוֹק.
  3. לחץ על הנקודות המשולשות בפינה השמאלית העליונה.
  4. נווט אל כלים נוספים > אנימציות.

פעולה זו תפתח את מגירת האנימציה בחלק התחתון.

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

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

כלי ה-DevTools מציגים את כל האנימציות הקשורות לאלמנט שבחרת. מכיוון שיש רק אנימציה בודדת שהוגדרה עבור התיבה האדומה -rotateAndChangeColor- אתה רק תראה את הפרטים שלו.

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

כאשר אתה בודק את מעבר הכפתורים, DevTools יציג את המאפיינים האישיים של המעבר: הצבע וצבע הרקע.

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

דוגמאות לאנימציה מתקדמות

התחל בהחלפת הסימון בתוך ה-HTML שלך תג עם הסימון הבא:


class="move-me move-me-1">steps(4, end)</div>
<br />

class="move-me move-me-2">steps(4, start)</div>
<br />

class="move-me move-me-3">no steps</div>

לאחר מכן החלף את כל הסגנונות שלך style.css קובץ עם זה:

.move-me {
display: inline-block; 
padding: 20px;
color: white;
position: relative;
margin: 0 0 10px 0;
}
.move-me-1 {
animation: move-in-steps 8ssteps(4, end) infinite;
}


.move-me-2 {
animation: move-in-steps 8ssteps(4, start) infinite;
}


.move-me-3 {
animation: move-in-steps 8sinfinite;
}


body {
padding: 20px;
}


@keyframes move-in-steps {
 0% {
left: 0;
background: blue;
 }
 100% {
left: 100%;
background: red;
 }
}

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

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

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

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

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

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

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

התכונה DevTools של Google Chrome היא כלי מדהים לאיתור באגים ב-CSS שלך, כולל אנימציות. הוא מספק תצוגה מפורטת של כל מעבר והנפשה בדף שלך, כך שתוכל לראות בדיוק מה קורה בכל שלב.

כמפתח אינטרנט, עליך להכיר את פונקציית DevTools של הדפדפן שלך, או המקבילה לה.