![](https://arzgu.ir/storage/images/shares/blog/comprehensive-guide-to-animation-in-css-and-its-design-on-the-site/0.png)
همانطور که در عنوان مقاله مشاهده میکنید در این بخش قصد داریم تا کمی در مورد انیمیشن ها در CSS و ویژگی ها و کاربردهای آن بپردازیم. همانطور که از اسم آن معلوم است ما در بخش HTML & CSS یک پروپرتی یا عنصری به انیمیشن داریم که با استفاده از این نوع ویژگی در طراحی سایت میتوانیم خلاقیت ها و افکت های زیبایی را برای سایت خود طراحی کنیم که باعث زیبایی و جذابیت سایت ما میشود. با استفاده از این انیمیشن ها میتوان کارها یا خروجی های بسیار زیبا و جالبی را طراحی و ارائه دارد. همچنین انیمیشن ها دارای چندین بعد در زمینه میباشند که جلوتر به آنها نیز اشاره خواهیم کرد. اگر مایل هستید تا اطلاعات و داده های موثر و کاربردی را در این زمینه کسب کنید پس مارا تا پایان این مقاله دنبال کنید.
انیمیشنهای CSS از دو بلوک مهم ساختمان ایجاد میشوند. Keyframes - مراحل و استایلهای انیمیشن ها در CSS را تعریف میکند. keyframes - Animation Properties@ را به یک المنت مشخص اختصاص میدهد و شیوه پردازش انیمیشن آن را شرح میدهد.
Keyframesپایه و کلیت انیمیشن در CSS است. آنها تعریف میکنند که انیمیشن ها در هر سطح از جدول زمانی انیمیشن چگونه رفتار کنند. هر keyframes از این عناوین تشکیل شده است: نام انیمیشن در CSS : نامی است که انیمیشن را شرح میدهد ، به عنوان مثال bounceIn. مراحل انیمیشن در CSS : هر مرحله از انیمیشن به طور درصدی نمایش داده میشود. 0٪ حالت ابتدایی انیمیشن را نشان میدهد. 100٪ نمایانگر وضعیت نهایی انیمیشن میباشد. حالتهای بین نا بین را نیز میتوان در بین آنها افزود. CSS Properties: خصوصیات CSS برای هر مرحله از جدول زمانی انیمیشن تعریف شده است.
پس از تعریف keyframes، خاصیت های انیمیشن ها باید به منظور عملکرد انیمیشن شما اضافه شوند. این خاصیت keyframes را به عناصر مورد نظر شما اختصاص داده و چگونگی انجام انیمیشن در CSS را توضیح میدهند. برای عملی شدن انیمیشن بایستی دو ویژگی انیمیشن زیر را اضافه کنید: animation-name: نام انیمیشن، تعریف شده در keyframes. animation-duration: مدت زمان انیمیشن، در چند ثانیه (به عنوان مثال، 5 ثانیه) یا میلی ثانیه (به عنوان مثال، 200ms). در ادامهی نمونه بالا، به عنوان نمونه، نام انیمیشن و زمان انیمیشن را به طور زیر به تگهای div که قصد داریم آنها را متحرک کنیم، اضافه خواهیم نمود.
علاوه بر ویژگیهای مورد نیاز و الزامی مانند نام و مدت زمان انیمیشن، میتوانید با استفاده از ویژگیهای زیر، انیمیشنها پیچیدهی دیگری را تنظیم و ایجاد کنید.
animation-timing-function
animation-delay
animation-iteration-count
animation-direction
animation-fill-mode
animation-play-state
نتیجه گیری:
در این مقاله در تلاش بودیم تا بهترین و اساسی ترین نکات در مورد انیمیشن ها در CSS و ویژگی ها و کاربردهای آن به شما توضیح بدیم و همچنین به بررسی برخی از بلوک ها و ویژگی های اضافی یا مرتبط با انیمیشن ها با شما صحبت کردیم و گفتیم که انیمیشن ها میتوان تم یا ویژگه های ظاهری خاصی به سایت شما الهام بخشند و کاربران با دیدن این ویژگی ها و افکت ها شیفته سایت شما شوند. بنابراین به این نتیجه میرسیم که انیمیشن ها با توجه به ویژگی های منحصربه فردی که دارند، در طراحی سایت بسیار مهم هستند و از اهمیت زیادی برخوردارند و میتوانند تاثیر بسزایی در ترافیک و بازدیدکنندگان سایت شما داشته باشند. انیمیشن ها مهمترین بخش زیبایی و خلاقیت سایت شما را در بر میگیرند.