
איך עושים אנימציית "הקלדה" ב-CSS בלבד?
איך עושים אנימציית "הקלדה" בcss?
😏 ⚠ אזהרת חנונים דרגה 2. 👨👩👧👧 נו מה עכשיו אנימציות... 😎 למה ככה? 😎 שתדעו לכם שמה שהכי מרגיז אתכם זה מה שיחשל אתכם! (ועוד לקט מנטרות אוויליות של ילדי טיקטוק שהשקיעו את כל דמי הפורים שלהם בלונג על מטבע עם שם של זוחל מטנזניה אחרי שמישהו מהשכבה שלהם נשבע להם שהוא עולה בסופ"ש במליארד אחוז. כי אח שלו שמגרד חישגד מגיל 6 אמר לו). אז בגדול מצורף פה בcodepen את הקוד שעושה אנימצית הקלדה:
👨👩👧👧 נשברנו, תסביר קצת? 😎 הדברים העיקריים: בהגדרת האנימציה יש את שם האנימציה כמצופה (2 מהם( animation-name* וinfinite - כמה פעמים לחזור על האנימציה animation-iteration-count*. אחת מהם שעושה את הקו המהבהב מצד שמאל - פשוטה למדיי. פשוט משחק עם הצבע של הborder מצד שמאל. 🥱 והשניה שמשחקת עם הwidth של הh1, והקטע הקצת מיוחד זה הפונקציה steps() שמחלקת את האנימציה לקפיצות כדי לדמות הקלדה (וקנגרו עם אולקוס). 👺 וטא דאםםםםםם יש לנו אנימציה שיש שיגידו שהיא מגניבה, ויש שיגידו תמצא נושא אחר ותעזוב אותנו
Yosefus Flavius
כותב הבלוג