Javascript Disabled!

Please Enable Javascript if you disabled it, or use another browser we preferred Google Chrome.
Please Refresh Page After Enable

Powered By UnCopy Plugin.

نحوه چرخش انیمیشن در CSS


در وب، انیمیشن نقش کلیدی در جذب کاربران دارد. یک کاربر به احتمال زیاد به یک وب سایت متحرک علاقه مند است تا یک وب سایت ایستا. با استفاده از CSS “انیمیشنویژگی ”، ما می توانیم هر عنصری را متحرک کنیم. این ویژگی به ما اجازه می دهد تا وب سایت را جذاب تر و زیباتر کنیم. سبک عناصر را به تدریج تغییر می دهد.

در این راهنما قصد داریم با چرخش انیمیشن ها در CSS آشنا شویم.

چگونه انیمیشن را در CSS بچرخانیم؟

پویانمایی چرخشی به عنصر اجازه می دهد تا ظاهر خود را برای یک دوره مرکزی تغییر دهد. برای انیمیشن چرخشی، “انیمیشن” از ویژگی CSS استفاده می شود. ما می توانیم این ویژگی را در هر عنصر HTML مانند تصویر، SVG، متن و بسیاری موارد دیگر اعمال کنیم.

حال به نکات زیر می پردازیم:

    • خاصیت انیمیشن
    • نحو ویژگی انیمیشن
    • چگونه با استفاده از CSS یک انیمیشن چرخشی انجام دهیم؟

چگونه از ویژگی “انیمیشن” در CSS استفاده کنیم؟

انیمیشنویژگی ” اجازه می دهد تا سبک عنصر را از یکی به دیگری تغییر دهید. برای این کار، نام انیمیشن، سرعت، تعداد انیمیشن و جهت چرخش را مطابق دستور زیر مشخص کنید.

نحو

انیمیشن: انیمیشن-نام سرعت تکرار-تعداد جهت;

    • نام انیمیشن: این نشان دهنده نام یک انیمیشن است (توکار یا سفارشی (با استفاده از فریم های کلیدی)).
    • سرعت: برای کاهش سرعت و افزایش سرعت انیمیشن استفاده می شود. مثلا، “2 ثانیه” (به مدت دو ثانیه).
    • تعداد تکرار: این نشان می دهد که چند بار می خواهید انیمیشن شما ادامه یابد.
    • جهت: نحوه پخش یک انیمیشن مانند جلو، عقب یا متناوب را مشخص می کند.

پس از درک نحو اصلی ویژگی انیمیشن، اجازه دهید به کار عملی بپردازیم و نحوه ایجاد یک انیمیشن چرخشی با استفاده از CSS را درک کنیم.

مثال: چرخاندن شی HTML تصویر در CSS

در HTML کد عنصری را که می خواهید بچرخانید بنویسید. در اینجا یک نماد SVG را می چرخانیم:

<بدن>
<بخش کلاس=“کانتینر”>
<img src=“img.svg” کلاس=“چرخش”/>
بخش>
بدن>

بیایید انیمیشن چرخش را در CSS اعمال کنیم. اینجا “چرخش” برای دسترسی به کلاس اختصاص داده شده به تصویر انتخاب شده ای که می خواهیم در CSS به آن بچرخانیم استفاده می شود. در مرحله بعد، عرض تصویر را روی “ قرار می دهیم100 پیکسل” و آن را در 2 ثانیه به تعداد بی نهایت در یک الگوی خطی بچرخانید. با این حال، می‌توانید سرعت، تعداد تکرار و جهت را به انتخاب خود تغییر دهید:

چرخش {
عرض: 100 پیکسل؛
انیمیشن: rotation 2s infinite linear;
}

@keyframes برای تعریف نقطه شروع و پایان انیمیشن استفاده می شود (با استفاده از “از جانب” و ”به” کلید واژه ها). علاوه بر این، نام انیمیشن را ارائه دهیدچرخش” به دنبال کلیدهای @ که می خواهید به آن متحرک شوید. از آنجایی که می خواهیم انیمیشن را به صورت دایره ای جابجا کنیم، از «چرخش ()” تابع ویژگی تبدیل که در آن از ” شروع خواهیم کرد0 درجه” و پایان در ”359 درجه”:

@چرخش فریم های کلیدی {
از جانب {
تبدیل: چرخش(0 روز);
}
به {
تبدیل: چرخش(359 درجه);
}
}

پس از اجرای کد CSS، به فایل HTML رفته و آن را اجرا کنید تا نتیجه زیر را دریافت کنید:

با استفاده از “انیمیشنویژگی ”، ما یک عنصر را با موفقیت در یک دوره تعریف شده چرخانده ایم.

نتیجه

برای ایجاد یک انیمیشن در حال چرخش در CSS، از ویژگی animation استفاده کنید و مقدار انیمیشن ها مانند مدت زمان، جهت و سرعت را تنظیم کنید. علاوه بر این، تابع rotate() CSS برای چرخاندن یک عنصر به صورت دایره‌ای در ویژگی تبدیل استفاده می‌شود. این مقاله ویژگی انیمیشن را برای چرخش یک انیمیشن برای تعداد بی نهایت بار توضیح داد.

به این مطلب امتیاز دهید

جهت ارسال نظر اینجا کلیک کنید.