آموزش کار با ویژگی Transitions در CSS

Transitions در CSS به شما این امکان را می دهد مقادیر ویژگی را به طور هموار و در مدت زمان مشخص تغییر دهید. در این مقاله قصد داریم ویژگی Transitions در CSS را به طور کامل آموزش دهیم، همراه داتیس نتورک باشید.

Transitions در CSS

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

به منظور اعمال افکت های transition روی یک عنصر html . شما ابتدا باید دو چیز را مد نظر داشته باشید:

۱- ویژگی CSS که قصد دارید. عمل Transition را روی آن اعمال کنید. (مانند جابه جایی ، انتقال یا تغییر اندازه عناصر و …).

۲- تعیین مدت زمانی که می خواهید. در طول آن زمان، افکت Transition اجرا شود.

نکته: اگر مدت زمان را تعیین نکنید . بصورت پیش فرض مقدار “۰” در نظر گرفته می شود. و در نتیجه شما هیچ نتیجه ای را در اجرا مشاهده نخواهید کرد.

در مثال زیر یک عنصر div با عرض و ارتفاع ۱۰۰پیکسل و پس زمینه قرمز تعریف شده. و یک افکت Transition نیز روی ویژگی width (عرض) آن تعریف شده است. که به مدت زمان ۲ ثانیه اجرا می شود:

مثال:

div {
width: 100px;
height: 100px;
background: red;
-webkit-transition: width 2s; /* Safari */
transition: width 2s;
}

اکنون مشخص می کنیم. که با حرکت ماوس روی عنصر div عرض آن به ۳۰۰ پیکسل تغییر کند. در نتیجه زمانیکه اشاره گر ماوس روی عنصر div قرار گیرد. عرض آن به آرامی به ۳۰۰ پیکسل تغییر می کند.

div:hover {
width: 300px;
}

تنظیمات سرعت تغییر

شما با استفاده از ویژگی transition-timing-function می توانید سرعت اثر گذاری و یا تغییر Transitions در CSS را کنترل کنید.

ویژگی transition-timing-function  می تواند مقادیر زیر را داشته باشد:

• ease: شما با این مقدار می توانید یک اثر انتقال را با شروع آهسته ، سپس سریع ، سپس به آرامی پایان دهید. (این پیش فرض است)
• linear: یک اثر انتقال را با همان سرعت از ابتدا تا انتها مشخص می کند.
• ease-in: با شروع آهسته یک Transition  را مشخص می کند.
• ease-out: یک Transition با پایان آهسته را مشخص می کند.
• ease-in-out: یک اثر گذار را با شروع و پایان آهسته مشخص می کند.
• cubic-bezier(n,n,n,n): به شما اجازه می دهد مقادیر خود را در یک تابع bezier-cubic تعریف کنید.

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

مثال:

#div1 {transition-timing-function: linear;}
#div2 {transition-timing-function: ease;}
#div3 {transition-timing-function: ease-in;}
#div4 {transition-timing-function: ease-out;}
#div5 {transition-timing-function: ease-in-out;}

به تاخیر انداختن انتقال در Transitions در CSS

ویژگی Delay برای اثر گذار تأخیر (در ثانیه) را مشخص می کند.

مثال زیر 1 ثانیه تاخیر قبل از شروع دارد.

مثال:

div {
transition-delay: 1s;
}

مثال های انتقال بیشتر

جالب است بدانید می توان خصوصیات Transitions در CSS به صورت جداگانه مشخص کرد.

مثال:

div {
transition-property: width;
transition-duration: 2s;
transition-timing-function: linear;
transition-delay: 1s;
}

یا می توان با استفاده از Transition مختصر مشخص کرد.

مثال:

div {
transition: width 2s linear 1s;
}

امیدوارم این مقاله برایتان مفید بوده باشد.

داتیس نتورک را در شبکه های اجتماعی دنبال کنید.