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