transition در css | آموزش کامل و مرحله به مرحله

transition در css چیست؟

transition در لغت به معنی «تحول» یا «گذر کردن» از یک مرحله به مرحله ی دیگر است اما در زبان CSS زمانی که از transition ها استفاده میکنیم به عنصر اجازه می دهیم که بین دو حالت به صورت نرم و زیبا تغییر کند.

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

خصوصیت	کروم	edge	فایرفاکس	سافاری	اپرا
transition	26.0 4.0 -webkit-	10.0	16.0 4.0 -moz-	6.1 3.1 -webkit-	12.1 10.5 -o-
transition-delay	26.0 4.0 -webkit-	10.0	16.0 4.0 -moz-	6.1 3.1 -webkit-	12.1 10.5 -o-
transition-duration	26.0 4.0 -webkit-	10.0	16.0 4.0 -moz-	6.1 3.1 -webkit-	12.1 10.5 -o-
transition-property	26.0 4.0 -webkit-	10.0	16.0 4.0 -moz-	6.1 3.1 -webkit-	12.1 10.5 -o-
transition-timing-function	26.0 4.0 -webkit-	10.0	16.0 4.0 -moz-	6.1 3.1 -webkit-	12.1 10.5 -o-

ساخت transition در css

برای ساخت transition در css به دو چیز نیاز داریم:

خصوصیت CSS ای که قرار است افکت ما را بگیرد
مدت زمان اجرای افکت

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

مثال زیر یک عنصر <div> قرمز رنگ با سایز 100px در 100px را نشان می دهد. ما برای این عنصر، یک transition از نظر خصوصیت width و به مدت 2 ثانیه تعیین کرده ایم. به کدها توجه کنید:

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

این transition زمانی اجرا شده و قابل نمایش خواهد بود که خصوصیت width در CSS تغییر کند. با استفاده از کد زیر تعیین کرده ایم که اگر کاربر با موس خود روی عنصر رفت چه اتفاقی انجام پذیرد:

<!DOCTYPE html>
<html>
<head>
<style> 
div {
  width: 100px;
  height: 100px;
  background: red;
  -webkit-transition: width 2s; /* For Safari 3.1 to 6.0 */
  transition: width 2s;
}

div:hover {
  width: 300px;
}
</style>
</head>
<body>

<h1>The transition Property</h1>

<p>Hover over the div element below, to see the transition effect:</p>
<div></div>

<p dir='rtl'><b>هشدار:</b> این مثال در Internet Explorer 9 و نسخه های قبل تر آن کار نمی کند.</p>

</body>
</html>

مشاهده ی خروجی در JSBin

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

باید بدانید که ما محدود به یک نوع خاص از تغییر نیستیم بلکه می توانیم در یک قسمت از کد چندین افکت مختلف را تعیین کنیم. به طور مثال در کد زیر تغییرات را برای width و height انجام داده ایم، به طوری که این تغییرات برای width مساوی با 2 ثانیه و برای height مساوی با 4 ثانیه باشد:

<!DOCTYPE html>
<html>
<head>
<style> 
div {
  width: 100px;
  height: 100px;
  background: red;
  -webkit-transition: width 2s, height 4s; /* For Safari 3.1 to 6.0 */
  transition: width 2s, height 4s;
}

div:hover {
  width: 300px;
  height: 300px;
}
</style>
</head>
<body>

<h1>The transition Property</h1>

<p>Hover over the div element below, to see the transition effect:</p>

<div></div>

<p dir='rtl'><b>هشدار:</b> این مثال در Internet Explorer 9 و نسخه های قبل تر آن کار نمی کند.</p>

</body>
</html>

مشاهده ی خروجی در JSBin

تعیین سرعت مرحله ای

می توانید سرعت تغییرات افکت های مختلف را به صورت مرحله ای تعیین کنید! در حالت عادی می گفتیم مثلا 2 ثانیه یا 4 ثانیه و در طول این 2 یا 4 ثانیه سرعت انجام تغییرات در حالت خاصی بود (ابتدا آهسته بود، سپس تند می شد و در آخر دوباره آهسته می شد)، اما با سرعت های مرحله ای، این سرعت در طول 2 یا 4 ثانیه ی ما متغیر خواهد بود و خودمان نحوه ی این تغییر را تعیین می کنیم! برای تعیین سرعت های مرحله ای از خاصیت transition-timing-function استفاده می کنیم که می تواند خاصیت های زیر را داشته باشد:

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

در مثال زیر برخی از این حالت ها را آورده ایم:

<!DOCTYPE html>
<html>
<head>
<style> 
div {
  width: 100px;
  height: 100px;
  background: red;
  -webkit-transition: width 2s; /* Safari */
  transition: width 2s;
}

/* For Safari 3.1 to 6.0 */
#div1 {-webkit-transition-timing-function: linear;}
#div2 {-webkit-transition-timing-function: ease;}
#div3 {-webkit-transition-timing-function: ease-in;}
#div4 {-webkit-transition-timing-function: ease-out;}
#div5 {-webkit-transition-timing-function: ease-in-out;}

/* Standard syntax */
#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;}

div:hover {
  width: 300px;
}
</style>
</head>
<body>

<h1>The transition-timing-function Property</h1>

<p>Hover over the div elements below, to see the different speed curves:</p>

<div id="div1">linear</div><br>
<div id="div2">ease</div><br>
<div id="div3">ease-in</div><br>
<div id="div4">ease-out</div><br>
<div id="div5">ease-in-out</div><br>

<p dir='rtl'><b>هشدار:</b> این مثال در Internet Explorer 9 و نسخه های قبل تر آن کار نمی کند.</p>

</body>
</html>

مشاهده ی خروجی در JSBin

خصوصیت transition-delay

خصوصیت transition-delay اجرای افکت یا انیمیشن را تا مدت مشخصی به تعویق می اندازد. به طور مثال در کد زیر برای transition-delay مقدار 1 ثانیه را قرار داده ایم. بنابراین شاهد 1 ثانیه وقفه در اجرای افکت خواهیم بود:

<!DOCTYPE html>
<html>
<head>
<style> 
div {
  width: 100px;
  height: 100px;
  background: red;
  -webkit-transition: width 3s; /* Safari */
  -webkit-transition-delay: 1s; /* Safari */
  transition: width 3s;
  transition-delay: 1s;
}

div:hover {
  width: 300px;
}
</style>
</head>
<body>

<h1>The transition-delay Property</h1>

<p>Hover over the div element below, to see the transition effect:</p>

<div></div>

<p dir='rtl'><b>هشدار:</b> افکت ما دارای 1 ثانیه تاخیر عمدی است و کد هایمان اشکالی ندارند.</p>

<p dir='rtl'><b>هشدار:</b> این مثال در Internet Explorer 9 و نسخه های قبل تر آن کار نمی کند.</p>

</body>
</html>

مشاهده ی خروجی در JSBin

همراهی transition و transformation

در جلسات قبل در رابطه با transformation صحبت کردیم. در این مثال می خواهیم transformation ها را به همراه transition بیاوریم و نتیجه ی ترکیب آن ها را در کدهایمان ببینیم:

<!DOCTYPE html>
<html>
<head>
<style> 
div {
  width: 100px;
  height: 100px;
  background: red;
  -webkit-transition: width 2s, height 2s, -webkit-transform 2s; /* Safari */
  transition: width 2s, height 2s, transform 2s;
}

div:hover {
  width: 300px;
  height: 300px;
  -webkit-transform: rotate(180deg); /* Safari */
  transform: rotate(180deg);
}
</style>
</head>
<body>

<h1>Transition + Transform</h1>

<p>Hover over the div element below:</p>

<div></div>

<p dir='rtl'><b>هشدار:</b> این مثال در Internet Explorer 9 و نسخه های قبل تر آن کار نمی کند.</p>

</body>
</html>

مشاهده ی خروجی در JSBin

همانطور که می بینید این بار به جای آنکه تغییرات ما از ابتدا روی عنصر اعمال شوند، با یک انیمیشن خاص اجرا شده و کار را بسیار زیباتر کرده اند.

جدا کردن خصوصیات

خصوصیت مربوط به transition می توانند از هم جدا شده و به صورت زیر جدا جدا ذکر شوند:

<!DOCTYPE html>
<html>
<head>
<style> 
div {
  width: 100px;
  height: 100px;
  background: red;
  /* For Safari 3.1 to 6.0 */
  -webkit-transition-property: width;
  -webkit-transition-duration: 2s;
  -webkit-transition-timing-function: linear;
  -webkit-transition-delay: 1s;
  /* Standard syntax */
  transition-property: width;
  transition-duration: 2s;
  transition-timing-function: linear;
  transition-delay: 1s;
}

div:hover {
  width: 300px;
}
</style>
</head>
<body>

<h1>The transition Properties Specified One by One</h1>

<p>Hover over the div element below, to see the transition effect:</p>

<div></div>


<p dir='rtl'><b>هشدار:</b> افکت ما دارای 1 ثانیه تاخیر عمدی است و کد هایمان اشکالی ندارند.</p>

<p dir='rtl'><b>هشدار:</b> این مثال در Internet Explorer 9 و نسخه های قبل تر آن کار نمی کند.</p>

</body>
</html>

مشاهده ی خروجی در JSBin

و یا اینکه همگی در دستور transition خلاصه شوند:

<!DOCTYPE html>
<html>
<head>
<style> 
div {
  width: 100px;
  height: 100px;
  background: red;
  -webkit-transition: width 2s linear 1s; /* For Safari 3.1 to 6.0 */
  transition: width 2s linear 1s;
}

div:hover {
  width: 300px;
}
</style>
</head>
<body>

<h1>Using The transition Shorthand Property</h1>

<p>Hover over the div element below, to see the transition effect:</p>

<div></div>

<p dir='rtl'><b>هشدار:</b> افکت ما دارای 1 ثانیه تاخیر عمدی است و کد هایمان اشکالی ندارند.</p>

<p dir='rtl'><b>هشدار:</b> این مثال در Internet Explorer 9 و نسخه های قبل تر آن کار نمی کند.</p>

</body>
</html>

مشاهده ی خروجی در JSBin