؛
بارها و بارها انیمیشن ها در یک صفحه وب برای بهبود تجربه کاربر ، جذاب تر و بصری تر شدن آن ، اجرا می شوند. با استفاده از ویژگی انیمیشن و قانونkeyframes ، می توانید با دستکاری تعداد زیادی از ویژگی ها ، انیمیشن مورد نظر خود را ایجاد کنید. این مقاله اصول ساخت انیمیشن ها را با استفاده از یک پروژه کوچک به عنوان مثال نشان می دهد ، متشکل از چهار مربع که به سمت راست حرکت می کنند و در انتها در یک برج قرار می گیرند.
قبل از شروع با انیمیشن ها ، باید ظرفی را در پرونده index.html ایجاد کنیم که آن را بوم (Canvas) می نامیم ، این مکانی برای وقوع همه انیمیشن ها خواهد بود. همچنین ، مربع های ساکن و مواردی را که در حرکت هستند ایجاد خواهیم کرد.
index.html
<div class="canvas"
<div class="static-square"div
<div class="static-square"div
<div class="static-square"div
<div class="static-square"div
<div class="animated-square"div
<div class="animated-square"div
<div class="animated-square"div
<div class="animated-square"div
div بوم ما یک موقعیت نسبی خواهد داشت و بقیه عناصر یک موقعیت مطلق دارند ، به این ترتیب به راحتی می توانیم آنها را دستکاری کرده و در مکان مورد نظر قرار دهیم.
مهم است که بوم دارای ویژگی سرریز با مقدار پنهان باشد به طوری که هیچ عنصری …