Transition چگونه کار می کند؟
transition در CSS3، افکتی است که اجازه می دهد یک عنصر از یک Style به Styleی دیگر بتدریج تغییر نماید.
برای انجام آن، حداقل باید دو چیز را مشخص نمایید:
خصوصیت CSSی که می خواهید انتقال در ازای تغییر آن انجام شود.
مدت زمان انجام انتقال
مثال (Transition چگونه کار می کند؟)
انتقال روی خصوصیت width، با مدت زمان 2 ثانیه:
div
{
transition: width 2s;
-webkit-transition: width 2s; /* Safari */
}
{
transition: width 2s;
-webkit-transition: width 2s; /* Safari */
}
توجه: در صورتی که هیچ زمانی تنظیم نشود، افکتی رخ نخواهد داد چون زمان پیش فرض 0 ثانیه است.
افکت زمانی رخ می دهد که مقدار خصوصیت مشخص شده در transition تغییر کند. به عنوان نمونه این تغییر می تواند زمانی رخ دهد که موس روی عنصر، قرار می گیرد:
مثال (Transition چگونه کار می کند؟)
مشخص کردن hover: برای عنصر <div>:
div:hover
{
width:300px;
}
خودتان امتحان کنید »{
width:300px;
}
توجه: زمانی که موس از روی عنصر خارج می شود، width عنصر بتدریج به مقدار اولیه خود تغییر می کند.
