ویژگی انتقال CSS

ویژگی انتقال CSS خلاصه ای برای چهار زیر خاصیت مربوط به انتقال است:

• خاصیت گذار
• مدت زمان
• عملکرد-زمان-انتقال
• تاخیر – انتقال

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

گذار: تأخیر عملکرد – زمان بندی مدت زمان ویژگی ؛

یک زیرخاصیت پرشده به طور خودکار روی مقدار پیش فرض تنظیم می شود. ما در زیر بخش خود را به تفصیل توضیح خواهیم داد. از همه آن ها می توان به صورت جداگانه نیز استفاده کرد.

استفاده از ویژگی انتقال

ویژگی انتقال-ویژگی ویژگی CSS را مشخص می کند که اثر گذار بر روی آن اعمال خواهد شد:

div {
    transition-property: width;
}

div:hover {
    width: 200px;
}

بررسی این ویژگی انتقال CSS ساده است:

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

مقدار پیش فرض برای ویژگی انتقال هیچ است ، به این معنی که انتقال برای هیچ خاصیت CSS اعمال نمی شود. همچنین می توانید از کلمه کلیدی آن ها برای انتخاب همه خصوصیاتی که می توانند از انتقال CSS استفاده کنند استفاده کنید یا یکی از آن ها را دقیقاً نامگذاری کنید.

همچنین می توانید چندین ویژگی را با جداسازی با کاما مشخص کنید:

div {
    transition-property: width, height;
}

div:hover {
    width: 250px;
    height: 250px;
}

تعریف مدت زمان انتقال CSS

با استفاده از خاصیت CSS با انتقال از طریق CSS به شما امکان می دهد مدت زمان انجام یک انتقال را تعیین کنید:

a {
    transition-duration: 4s;
}

برای تعریف مدت زمان انتقال CSS ، باید آن را در واحدهای زمانی (مثلاً s یا ms) مشخص کنید:

مدت زمان انتقال: زمان؛

مقدار پیش فرض این ویژگی انتقال CSS 0s است. این بدان معناست که مرورگر هیچ اثر گذار را نشان نمی دهد – این عنصر به سادگی از مرحله اولیه خود به نتیجه تغییر می کند.

سرعت انتقال:

ویژگی CSS-transfer-timing-function به شما امکان می دهد سرعت انتقال را تعیین کنید.

انتقالی-زمان بندی-تابع: مقدار؛

برای نرمتر کردن تغییرات ، از یک مدل منحنی تعریف شده توسط چهار نقطه استفاده می کنیم ، منحنی Bezier نیز نامیده می شود:

a {
    transition-timing-function: cubic-bezier(0, 0.25, 0.5, 1);
}

می توانید مقادیر سفارشی را برای منحنی خود تعریف کنید همانطور که در مثال بالا مشاهده می شود ، یا گزینه های از پیش تعریف شده را انتخاب کنید:

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

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

عملکرد-زمان-گذار: مراحل (x ، اصطلاح)؛

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

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

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

a {
    transition-timing-function: step-end;
}

تأخیر در انتقال CSS

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

div {         
   -webkit-transition-delay: 2s; /* Safari */ 
   transition-delay: 2s;
} 

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

برای تعریف تأخیر ، باید آن را در واحدهای زمانی (مثلاً s یا ms) مشخص کنید:

انتقال-تاخیر: زمان؛

مقدار پیش فرض برای این ویژگی انتقال CSS 0s است ، به این معنی که اثر گذار بلافاصله شروع می شود. با استفاده از مقدار مثبت می توانید آن را به تأخیر بیندازید. مقادیر منفی نیز مجاز هستند: آنها باعث می شوند اثر بلافاصله شروع شود ، اما در یک نقطه خاص از انتقال به جای شروع.

توجه: اگر انتقال بر چندین ویژگی CSS تأثیر بگذارد ، می توانید چندین بار تأخیر را تعیین کنید.

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

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

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