انیمیشن در CSS

با ویژگی انیمیشن در CSS آشنا می شویم.

استفاده از مختصر نویسی CSS

با استفاده از ویژگی انیمیشن CSS ، می توانید ویژگی های دیگر را متحرک کنید:

.animated {
    -webkit-animation: go 2s infinite; /* Chrome, Safari, Opera */
    animation: go 2s infinite;  	
}

در واقع خلاصه ای برای هشت زیر خواص است:

• نام انیمیشن
• مدت زمان انیمیشن
• عملکرد انیمیشن – زمان بندی
• انیمیشن-تاخیر
• انیمیشن-تکرار-شمارش
• انیمیشن-کارگردانی
• انیمیشن-پر کردن حالت
• حالت انیمیشن-بازی

در زیر بخش های مختلف زیر توضیح خواهیم داد.

قوانین نحوی استفاده از ویژگی انیمیشن CSS ساده است:

انیمیشن: نام مدت زمان زمان تاخیر تکرار جهت پر کردن بازی.

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

توجه: برای اینکه خلاصه مقاله به درستی کار کند ، مطمئن شوید که مقادیر را به همان ترتیب ذکر شده در بالا لیست کرده اید.

نامگذاری انیمیشن در CSS

ویژگی CSS animation-name یک انیمیشن خاص را برای استفاده در عنصر انتخاب شده تنظیم می کند:

.animated {
    -webkit-animation-name: animation; /* Opera, Chrome, Safari */
    animation-name: animation;
}

نحو این ویژگی انیمیشن CSS ساده است:

animation-name: مقدار؛

این مقدار می تواند یا هیچ کدام باشد که هیچ فریم کلیدی را نشان نمی دهد ، یا یک نام سفارشی برای شناسایی انیمیشن استفاده شود. برای ایجاد یک ، می توانید از حروف (حساس به حالت کوچک) ، اعداد ، زیر خط و خط تیره استفاده کنید.

مشخص کردن مدت زمان

برای تعریف طول چرخه انیمیشن ، از ویژگی CSS-animation-duration استفاده کنید:

.animated {
    -webkit-animation-duration: 2s; /* Opera, Chrome, Safari */
    animation-duration: 2s;
}

نحو برای مدت زمان انیمیشن CSS ساده است – شما فقط باید مدت زمان دلخواه را در چند ثانیه تعریف کنید:

انیمیشن-مدت زمان: مقدار؛

توجه: اگر مدت زمان انیمیشن را مشخص نکنید ، به هیچ وجه اجرا نمی شود ، زیرا مقدار پیش فرض آن 0s است.

دستکاری سرعت انیمیشن در CSS

عملکرد انیمیشن-زمان بندی CSS سرعت انیمیشن شما را تعریف می کند:

animation-timing-function: مقدار؛

برای روانتر کردن تغییرات ، از منحنی سرعت استفاده می شود. اگر با گرافیک رایانه ای آشنا هستید ، ممکن است از قبل بدانید که منحنی Bezier به چه معناست. در واقع ، این یک مدل منحنی است که توسط چهار نقطه تعریف شده است. هنگام نوشتن ویژگی animation-timing-function ، می توانید مقادیر سفارشی را برای منحنی خود تعریف کنید یا گزینه های از پیش تعریف شده را انتخاب کنید:

Description	Value
سرعتهای مختلف در چهار قسمت از انیمیشن که با مقادیر سفارشی در محدوده 0 تا 1 تعریف شده است	(cubic‑bezier(n,n,n,n
مقدار پیش فرض به سمت وسط افزایش می یابد ، سپس سرعت را کاهش می دهد	ease
یک سرعت ثابت را حفظ می کند	linear
سریع شروع می شود و کند می شود	ease-out
به آرامی شروع می شود و سرعت می گیرد	ease-in
انتقال به آرامی انجام می شود ، سرعت می گیرد و دوباره کند می شود	ease-in-out

.animated {
    animation-timing-function: ease-out;
}

روش دیگر برای تعیین سرعت استفاده از مراحل زیر است:

animation-timing-function: مراحل (x ، اصطلاح)؛

در این نوع نحو ، x نشان دهنده تعداد مراحل انیمیشن است. هر یک از آنها به همان مقدار زمان نشان داده می شوند. این اصطلاح نحوه رفتار آن را تعریف می کند:

Meaning	Term
اولین پرش در همان ابتدای انیمیشن اتفاق می افتد	jump-start
اولین پرش در همان ابتدای انیمیشن اتفاق می افتد	start
آخرین پرش در انتهای انیمیشن اتفاق می افتد	jump-end
آخرین پرش در انتهای انیمیشن اتفاق می افتد	end
مکث در همان ابتدا و انتهای انیمیشن اضافه می شود	jump-both
در ابتدا و انتهای انیمیشن هیچ پرشی وجود ندارد	jump-none

اگر فقط به یک مرحله نیاز دارید ، می توانید به جای مراحل (1 ، پرش-شروع) و مرحله-مرحله (1 ، پرش-پایان) از مرحله شروع استفاده کنید:

.step-start {
     animation-timing-function: step-start; 
}

.step-end {
     animation-timing-function: step-end;
}

تعریف تاخیر انیمیشن CSS

از ویژگی CSS انیمیشن تاخیر می توان برای تعیین تاخیر قبل از شروع انیمیشن استفاده کرد:

.animated {
    -webkit-animation-delay: 3s; /* Opera, Chrome, Safari */
    animation-delay: 3s;
}

نحو بسیار ساده است – شما فقط باید تاخیر انیمیشن CSS را در چند ثانیه تعریف کنید:

انیمیشن-تاخیر: مقدار؛

تعیین تعداد دوره های انیمیشن

ویژگی CSS animation-iteration-count مشخص می کند که یک انیمیشن چند بار باید به طور معمول پخش شود:

div {
 animation: myturn 4s;
 animation-iteration-count: 3;
}

نحو این ویژگی ساده است:

animation-iteration-count: مقدار؛

یا می توانید تعداد دفعات را تعریف کنید یا از کلمه کلیدی بی نهایت استفاده کنید تا انیمیشن به مدت نامحدود اجرا شود. مقدار پیش فرض این ویژگی 1 است.

تغییر جهت انیمیشن

برای اجرای یک انیمیشن خاص در چرخه های معکوس یا متناوب ، از ویژگی CSS-animation-direction استفاده کنید:

div {
    -webkit-animation-direction: alternate; /* Chrome, Safari, Opera */
    animation-direction: alternate;
}

برای استفاده از این ویژگی ، باید یکی از چهار مقدار موجود را تعریف کنید:

انیمیشن-جهت: مقدار؛

Description	Value
پیش فرض انیمیشن به طور معمول اجرا می شود	normal
این انیمیشن برعکس اجرا می شود. توابع زمان نیز معکوس می شود	reverse
انیمیشن به طور معمول اجرا می شود ، سپس با هر چرخه جدید جهت را معکوس می کند	alternate
انیمیشن برعکس اجرا می شود ، سپس با هر چرخه جدید جهت را معکوس می کند	alternate-reverse

توجه: مرورگرهای سافاری از معکوس و معکوس متناوب پشتیبانی نمی کنند.

سبک دادن به یک انیمیشن غیرفعال

از ویژگی CSS animation-fill-mode برای تنظیم سبک یک عنصر در حالی که انیمیشن فعال نیست (تمام شده یا تأخیر) استفاده می شود:

.animated {
    -webkit-animation-fill-mode: both; /* Opera, Chrome, Safari */
    animation-fill-mode: forwards;
}

به طور معمول ، انیمیشن ها تا زمانی که بازی را تمام نکنند ، بر روی عنصر تأثیر نمی گذارند. این ویژگی انیمیشن CSS می تواند چنین رفتاری را نادیده بگیرد.

ویژگی CSS animation-fill-mode چهار مقدار را می پذیرد:

animation-fill-mode: مقدار؛

Description	Value
مقدار پیش فرض وقتی انیمیشن اجرا نمی شود ، هیچ سبکی اعمال نمی شود.	none
این انیمیشن پس از پایان اجرای آخرین کلید فریم را حفظ می کند.	forwards
این انیمیشن قبل از شروع به کار ، دارای مقادیر keyframe اول است.	backwards
انیمیشن از قوانینی که هم به جلو و هم به عقب اعمال می شود پیروی خواهد کرد.	both

آیا انیمیشن در حال اجرا است؟

ویژگی CSS animation-play-state مشخص می کند که آیا انیمیشن در حال اجرا است:

animation-play-state: مقدار؛

این ویژگی انیمیشن CSS دو مقدار را می پذیرد:

Description	Value
انیمیشن در حال اجرا است	running
انیمیشن مکث شده است	paused

نکته: یادگیری انیمیشن ها را با موارد ساده مانند CSS fade in و CSS fade out شروع کنید. همچنین ایجاد توالی را آسان تر می کند.

پشتیبانی از مرورگر

این تگ در مرورگرهای : IE، safari ، firefox، cherom، opera  و Edge پشتیبانی می شود.

در دوره آموزش CSS بین المللی آکادمی دویکس به صورت رایگان ثبت نام کنید.