. این صفحه همچنین یک فایل CSS به نام style.css را وارد می کند:
<!DOCTYPE html > <html lang ="en" > <head > <meta charset ="UTF-8" > <meta name ="viewport" content ="width=device-width, initial-scale=1.0" > <title > Document</title > <link rel ="stylesheet" href ="style.css" > </head > <body > <div id ="box" > </div > <button > Test Button</button > </body > </html >
برای استایل دادن به هر دو عنصر، یک فایل style.css در همان پوشه HTML ایجاد کنید و موارد زیر را اضافه کنید:
#box {background : red ;height : 400px ;width : 400px ;margin-bottom : 1rem ;animation : rotateAndChangeColor 1000ms ease-in-out ;button {font-size : larger ;background-color : white ;border : 1px solid black ;padding : 0.5em 1em ;color : black ;height : 80px ;width : 300px ;border-radius : 0.5em ;transition : background-color 100ms ease-in-out , color 100ms ease-in-out ;cursor : pointer ;button :hover {background-color : black ;color : white ;@keyframes rotateAndChangeColor {rotate : 0deg ;background : red ;background : green ;background : blue ;background : yellow ;rotate : 360deg ;background : red ;
این سبک ها دو جزء ایجاد می کنند:
یک کادر ساده که با بارگیری صفحه می چرخد و رنگ آن تغییر می کند.
دکمه ای که با نگه داشتن ماوس روی آن رنگ پس زمینه تغییر می کند.
توجه داشته باشید که کادر قرمز با استفاده از دستور CSS @keyframe متحرک می شود، در حالی که دکمه از یک انتقال استفاده می کند. این به شما امکان می دهد این دو رویکرد را با استفاده از DevTools مرورگر مقایسه کنید.
انیمیشن ها را با استفاده از DevTools بررسی کنید
برای دسترسی به برگه انیمیشن ها در Chrome DevTools:
روی صفحه خود کلیک راست کنید تا منوی زمینه ظاهر شود.
Inspect را کلیک کنید.
روی سه نقطه در گوشه بالا سمت راست کلیک کنید.
به ابزارهای بیشتر > انیمیشن ها بروید.
با این کار کشوی انیمیشن در قسمت پایین باز می شود.
هر انیمیشنی که در صفحه شما رخ می دهد در اینجا نشان داده می شود. اگر صفحه خود را بازخوانی کنید و روی دکمه نگه دارید، انیمیشن ها در زیر تب انیمیشن ها نمایش داده می شوند.
وقتی روی یکی از این انیمیشن ها کلیک کنید، قدرت واقعی به دست می آید. به عنوان مثال، اگر روی انیمیشن جعبه کلیک کنید، خواهید دید که مرورگر فریم های کلیدی را به صورت زیر ارائه می دهد:
DevTools تمام انیمیشن های مربوط به عنصری را که انتخاب کرده اید نمایش می دهد. از آنجایی که فقط یک انیمیشن برای کادر قرمز تعریف شده است – rotateAndChangeColor – فقط جزئیات آن را خواهید دید.
می‌توانید خط را به سمت چپ بکشید تا انیمیشن بسیار سریع‌تر شود یا آن را به سمت راست بکشید تا سرعت انیمیشن کم شود. همچنین می‌توانید با تغییر دادن آیکون‌های مکث و پخش، انیمیشن را در نقاط خاصی متوقف کنید. درصدهای بالا به شما این امکان را می دهد که انیمیشن را به ترتیب با یک چهارم سرعت عادی و یک دهم سرعت آن پخش کنید.
هنگامی که انتقال دکمه را بررسی می کنید، DevTools ویژگی های فردی انتقال را نشان می دهد: رنگ و رنگ پس زمینه.
این ابزار به شما امکان می دهد انیمیشن خود را دستکاری کنید تا ببینید دقیقاً چگونه کار می کند. در صورت وجود هرگونه مشکل می توانید از آن برای عیب یابی وب سایت خود استفاده کنید.
نمونه های انیمیشن پیشرفته
با جایگزین کردن نشانه گذاری در تگ
HTML خود با نشانه گذاری زیر شروع کنید:
<div 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 8s steps (4, end ) infinite ;.move-me-2 {animation : move-in-steps 8s steps (4, start ) infinite ;.move-me-3 {animation : move-in-steps 8s infinite ;body {padding : 20px ;@keyframes move-in-steps {left : 0;background : blue ;left : 100%;background : red ;
همه عناصر
دارای انیمیشن حرکت در مرحله هستند که بر روی آنها اعمال می شود که موقعیت و رنگ پس زمینه را تغییر می دهد. علاوه بر آن، هر جعبه دارای یک انیمیشن متفاوت برای کنترل تعداد مراحلی است که طی خواهد کرد.
در حالی که جعبه سوم به طور پیوسته به سمت راست می لغزد، دو جعبه اول هر بار دو مرحله حرکت می کنند تا زمانی که همه به انتهای صفحه برسند (در حالی که جعبه دوم قبل از کادر اول شروع می شود).
اگر تب Animations را در DevTools باز کنید و صفحه را بازخوانی کنید، تمام اطلاعات مربوط به این انیمیشن ها را خواهید یافت:
چندین عنصر وجود دارد که همه آنها در یک دوره متحرک هستند. در این سناریو، رنگ پس زمینه و موقعیت جعبه به طور همزمان برای هر سه جعبه متحرک می شوند.
نکته دیگری که باید به آن توجه کرد گره های موجود در هر خط انیمیشن است. هنگامی که یک انیمیشن بی نهایت بار رخ می دهد، گره ها نشان می دهند که هر تکرار از کجا شروع می شود و در انیمیشن به پایان می رسد.
گرههای خالی اساساً فریمهای کلیدی انیمیشن شما هستند، در حالی که گرههای یکدست و رنگی شروع و پایان انیمیشن را نشان می‌دهند. هر بار که انیمیشن شما از نو شروع می شود، گره هایی با رنگ تیره خواهید داشت.
در نهایت، می توانید انیمیشن ها را با استفاده از DevTools ویرایش کنید، همانطور که می توانید با هر ویژگی CSS. تمام تغییراتی که با استفاده از رابط کاربری انیمیشن ایجاد میکنید در استایلهای درون خطی زیر تب Styles نشان داده میشوند و بالعکس. این به شما امکان می دهد تغییراتی ایجاد کنید، آنها را آزمایش کنید و آنها را در پروژه واقعی خود کپی کنید.
از Chrome DevTools برای اشکال زدایی CSS خود استفاده کنید
ویژگی DevTools Google Chrome یک ابزار عالی برای اشکال زدایی CSS شما از جمله انیمیشن ها است. این یک نمای دقیق از هر انتقال و انیمیشن در صفحه شما ارائه می دهد، بنابراین می توانید دقیقاً آنچه را که در هر مرحله اتفاق می افتد مشاهده کنید.
به عنوان یک توسعه دهنده وب، باید با عملکرد DevTools مرورگر خود یا معادل آن آشنا باشید.
منبع مقاله
Continue Reading
