
איך לגרום ל-SVG "לצייר את עצמו" בעזרת CSS בלבד
אחת האנימציות הכי כיפיות - SVG שמצייר את עצמו בלי טיפת JavaScript! בפוסט נבין את הטריק הפשוט, למה הוא עובד, ואיך להוסיף טאץ' מגניב לטפסים ולאפליקציות.
תוכן המאמר
והפעם לכבוד תחילת השבוע, ויום ראשון האהוב על כולנו. 😣 לאחת האנימציות האהובות עלי - svg שמצייר את עצמו על המסך. האנימציה נפוצה מאוד כמו בדוגמא שאצרף, כקריצה חמודה אחרי שליחה של טופס וכדומה. והמפתיע: שאפשר לעשות אותה בcss בלבד. ♥ העיקרון: אנחנו "מקוקוים" את הקו של הsvg בקו באורך כל הקו עצמו מה שגורם לו להיראות ריק, ואז בהדרגה אנחנו חושפים את הקו. ובעזרת animation-fill-mode אנחנו מבקשים מהאנימציה שאחרי שהיא מסיימת שתישאר על המצב הסופי שהוא בעצם הsvg המלא. וחלאס. מגניב או כן? תחיו לנצח ולא תמותו אפעם. שבוע מבורך 🚀
שתף את המאמר
אודות הכותב
Yosefus Flavius
כותב הבלוג
