در زمینه توسعه وب، جذابیت زیبایی شناختی یک وب سایت برای جذب کاربران و بهبود تجربه آنها ضروری است. انیمیشن CSS یک ابزار موثر برای توسعه دهندگان است. انیمیشن CSS به توسعه دهندگان این امکان را می دهد تا به عناصر وب استاتیک روح ببخشند و در نتیجه رابط های کاربری بصری جذاب و پویا ایجاد شود که بازدیدکنندگان را جذب و خوشحال می کند.
آشنایی با انیمیشن CSS
انیمیشن CSS توسعه دهندگان را قادر می سازد تا عناصر HTML را بدون نیاز به جاوا اسکریپت یا هر ابزار دیگری متحرک کنند. فریم‌های کلیدی، انتقال‌ها و سایر ویژگی‌های CSS به توسعه‌دهندگان اجازه می‌دهند تا بسیاری از جنبه‌های ظاهر و رفتار یک عنصر را در طول زمان کنترل کنند.
مفاهیم کلیدی
1. فریم های کلیدی
یک فریم کلیدی در CSS سبک هایی را که یک عنصر باید در لحظات خاصی در طول یک دنباله انیمیشن داشته باشد، تعریف می کند. ایجاد نقاط بین راهی را در نظر بگیرید که یک عنصر در حین حرکت آن را دنبال می کند. این نقاط راه که به صورت درصدهایی از 0% تا 100% داده می شوند، نحوه نمایش عنصر در هر مرحله از انیمیشن را مشخص می کنند. (ادامه مطلب)
نحو و کاربرد
برای تعریف فریم های کلیدی در CSS، از قانون @keyframes و به دنبال آن یک نام برای دنباله انیمیشن استفاده کنید. در بلوک keyframes@، مقادیر درصدی (یا کلمات کلیدی مانند از و به) و همچنین ویژگی‌ها و مقادیر CSS را که باید در نقاط خاصی اعمال شوند، مشخص می‌کنید.
در اینجا یک مثال اساسی است
@keyframes slide-in {
from {
transform: translateX(-100%);
}
to {
transform: translateX(0);
}
}
در این مثال، انیمیشن کشویی یک عنصر را از چپ به راست اسلاید می‌کند، از خارج از نمای درگاه (100-% عرض آن) شروع می‌شود و به موقعیت اصلی خود (0%) ختم می‌شود.
استفاده از فریم های کلیدی
هنگامی که فریم های کلیدی خود را تنظیم کردید، از ویژگی انیمیشن CSS برای اعمال آنها بر روی عناصر استفاده کنید. این ویژگی به شما امکان می دهد نام انیمیشن، مدت زمان، عملکرد زمان بندی، تاخیر و سایر ویژگی ها را ارائه دهید.
.element {
animation: slide-in 1s ease-out;
}
انیمیشن اسلاید به کلاس element اختصاص داده شده است که یک ثانیه طول می کشد و از یک تابع easing برای شتاب و کاهش سرعت استفاده می کند.
بیایید یک مثال را ببینیم
این انیمیشن باعث می شود متن به صورت افقی تکان بخورد.
خروجی:
Page Title
Shaking Text
این مثال‌های HTML نشان می‌دهند که چگونه انیمیشن‌های فریم کلیدی CSS را در صفحات وب خود قرار دهید و جلوه‌های بصری جذاب ایجاد کنید.
ویژگی های انیمیشن CSS Animation
ویژگی های انیمیشن CSS به توسعه دهندگان این امکان را می دهد که دقیقاً نحوه حرکت، تبدیل و انتقال آیتم ها در یک صفحه وب را کنترل کنند. این ویژگی ها به شما امکان می دهد بدون استفاده از جاوا اسکریپت یا کتابخانه های خارجی، انیمیشن های جذابی ایجاد کنید. (برای خواندن نمونه های بیشتر انیمیشن css اینجا را کلیک کنید)
نحو:
animation: name duration timing-function delay iteration-count direction fill-mode play-state;
بیایید به مثال دیگری نگاه کنیم
خروجی:
Cubic Bezier Bouncing Animation Example
در این مثال
- ویژگی animation با استفاده از انیمیشن‌های فریم کلیدی، یک افکت پرش به عنصر توپ اضافه می‌کند.
- تابع زمان بندی Bézier مکعبی که در انیمیشن استفاده می شود توسط تابع cubic-bezier (0.68 -0.55، 0.265، 1.55) با نقاط کنترل خاص تعریف می شود.
- انیمیشن فریم های کلیدی پرش افکت پرش را ایجاد می کند، از حالت اولیه (0%) تا نیمه راه (50%) که توپ با 100 پیکسل به بالا ترجمه می شود (translateY(-100px)) و سپس به حالت اولیه (100%) برمی گردد. .
- با تنظیم نقاط کنترل منحنی مکعبی Bézier، می توانید زمان و رفتار انیمیشن پرش را برای ایجاد نتایج دلخواه سفارشی کنید.
نتیجه
ویژگی‌های انیمیشن CSS ابزارهای مختلفی را در اختیار توسعه‌دهندگان قرار می‌دهد تا تجربه‌های وب زیبا و تعاملی بصری ایجاد کنند. با تسلط بر این ویژگی ها و ادغام آنها به روش های جدید، توسعه دهندگان می توانند طرح های خود را زنده کنند و تعامل کاربران را افزایش دهند. انیمیشن های CSS به بهترین وجه از طریق آزمایش و تمرین یاد می گیرند. (در مورد انیمیشن CSS بیشتر بخوانید)
