انیمیشن ها و ترنزیشن های CSS

سال‌هاست که css از اجزای اصلی یک صفحه وب است. ساخت اشکال متحرک تنها از طریق javascript یا ابزارهایی شبیه Macromedia Flash امکان‌پذیر بود. در نهایت انیمیشن ها و ترنزیشن های CSS اضافه شدند و اکنون ما گزینه‌های فراوانی برای ساخت اشکال متحرک داریم. در این مقاله نحوه کار ترنزیشن و انیمیشن در css و روش ایجادشان را برایتان توضیح می­‌دهم .

ترنزیشن در Css

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

بیایید مثال زیر را با هم بررسی کنیم:

در مثال بالا ما استایل یک عنصر را با کلاسی به نام some-text مشخص می‌کنیم. زمانی که نشانگر موس روی یک عنصر قرار بگیرد، ما رنگ پیش زمینه و پس زمینه را تغییر می‌دهیم و border-radius را به صفر تغییر می‌دهیم. همانطور که پیش از این گفتم این تغییر سریعاً و بدون هیچ گونه ترنزیشن در Css اتفاق میوفتد.

حالا می‌خواهیم یک ترنزیشن ساده به مثال بالا اضافه کنیم:

.some-text {
font-family: sans-serif;
cursor: pointer;
padding: 20px;
margin: 20px;
width: 300px;
background-color: #4545CD;
color: white;
line-height: 1.4;
border-radius: 10px;
}
.some-text:hover {
background-color: #BCBCEF;
color: #222;
border-radius: 0;
}

همانطور که احتمالا متوجه شده‌­اید، مثال بالا ویژگی border-radius را به صورت ناگهانی تغییر نمی­‌دهد. هنگامی که مقدار این ویژگی تغییر می‌کند؛ مرورگر یک ترنزیشن آرام انجام می­‌دهد. مدت زمان این ترنزیشن در Css یک دوم ثانیه یا 500 میلی­‌ثانیه است.
برای اینکه این افکت را به دست بیاوریم می­‌توانیم از ویژگی خلاصه­‌نویسی transition استفاده کنیم. اولین مقداری که باید وارد کنیم نام ویژگی‌­ای است که می­‌خواهیم ترنزیشن را بر روی آن اعمال کنیم (در مثال بالا border-radius) مقدار بعدی مدت زمان ترنزیشن است که بر حسب ثانیه (به طور مثال دوثانیه یا نیم ثانیه) و یا میلی­‌ثانیه (به طور مثال 300 میلی ثانیه یا 2500 میلی ثانیه) وارد می‌­شود.
با استفاده از کاما به عنوان جداکننده، می‌­توانید یک ترنزیشن در Css را به چندین ویژگی اعمال کنید.

.some-text {  transition: border-radius 500ms,color 1s,background-color 1s;  /*...*/}

در اینجا نتیجه را می‌بینید:

Transitions – Timing function

یکی دیگر از گزینه­‌هایی که می‌­توانید برای یک ترنزیشن در Css تنظیم کنید که Timing function است. Timing function روشی را که از طریق آن ترنزیشن در طول یک فریم پیش می‌­رود را کنترل می‌کند. به عبارت دیگر با تنظیم Timing function شما ترنزیشن­تان را به وجود می‌آورید:

• سرعت بالا در هنگام شروع و سرعت کم در پایان (ease-out)
• سرعت کم در شروع و سرعت بالا در پایان (easy-in)
• سرعت کم در ابتدا و انتها و سرعت بالا در میانه (ease-in-out)
• مقداری آرام­تر در ابتدا، سرعت بالا در میانه و سرعت کم در انتها (ease مقدار پیش فرض)
• بدون هیچ گونه تغییر سرعت (linear)

Timing functionهای دیگری هم وجود دارد اما این مواردی که ذکر شد جزو معمول­‌ترین­‌ها هستند. به منظوراستفاده از این‌ها، شما باید نام timing function مورد نظرتان را به عنوان سومین گزینه خلاصه­‌نویسی transition استفاده کنید.

.some-text {  transition: border-radius 500ms ease-in;  /*...*/}

ساده‌­ترین روش تعریف یک ترنزیشن در Css، استفاده از ویژگی خلاصه‌­نویسی transition است که به شما امکان می­‌دهد چندین گزینه را همزمان تنظیم کنید. همچنین این گزینه­‌ها را می‌­توانید به صورت جداگانه نیز تنظیم نمائید:

• transition-property:

نام خصوصیتی که می­‌خواهید ترنزیشن در Css را بر روی آن اعمال کنید.

• transition-duration:

مدت زمان ترنزیشن بر اساس ثانیه یا میلی ثانیه

• transition-timing-function:

Timing function ای که باید استفاده شود.

Transitions – delay

می‌­توانید تاخیری را برای شروع یک ترنزیشن در Css در نظر بگیرید و شروع ترنزیشن را به تعویق بیاندازید. اینکار از طریق ویژگی transition-delay امکان­پذیر است. اگر بخواهید از تابع خلاصه­‌نویسی transition استفاده کنید هم می­‌توانید به عنوان انتخاب چهارم و پس از timing function آن را اضافه کنید. این مقدار بر حسب ثانیه یا میلی­‌ثانیه تعریف می‌شود.

.some-text {  transition: border-radius 500ms ease-in 2s;  /*...*/}

انیمیشن ها در CSS

انیمیشن­‌ها ویژگی­‌هایی شبیه ترنزیشن­‌ها دارند با یک تفاوت: انیمیشن ها در CSS برای راه ­اندازی نیازی به تغییر مقدار یک ویژگی ندارند. شما کنترل کاملی بر زمان و نحوه انجام آنها دارید. آنها حتی می‌­توانند چندین بار یا به طور نامحدود تکرار شوند.

Animations – Keyframes

Keyframeها روشی هستند که از طریق آنها مراحل یک انیمیشن تعیین می­‌شود. با keyframe ها شما می‌­توانید زمان و چگونگی تغییر یک یا چند value را در بازه زمانی مشخص کنید:

@keyframes slide-anim {  from {    margin-left: 0;    margin-top: 0;  }   to {    margin-left: 200px;    margin-top: 200px;  }}

در تکه کد بالا ما انیمیشنی به نام slide-anim ایجاد کرده‌­ایم. کد با دادن صفر به ویژگی­‌های margin-left و margin-top شروع می‌شود و با دادن 200px به هر دو، پایان می‌یابد. برای استفاده از این ویژگی ما باید ویژگی animation را به عنصری که می‌­خواهیم متحرک کنیم اضافه کنیم.

.ball::before {  animation: slide-anim 2s infinite;  /*...*/}

• گزینه اول نام انیمیشن است (slide-anim)
• گزینه دوم مدت زمان انیمیشن است (2s)
• گزینه سوم تعداد تکرارها است. در این مثال ما از infinite استفاده می­‌کنیم که باعث می‌­شود انیمیشن ما به صورت پشت سر هم تکرار شود. اما این مقدار می‌­تواند یک مقدار عددی داشته باشد برای زمانی که ما می­‌خواهیم انیمیشن مان به تعداد محدودی تکرار شود.

Animations – More specific keyframes

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

@keyframes slide-anim {  
0% {    margin-left: 0;    margin-top: 0;  }   
25% {    margin-left: 200px;    margin-top: 0;    background-color: red;    border-radius: 0;  }   
50% {    margin-left: 200px;    margin-top: 200px;    background-color: green;    border-radius: 50%;  }   
75% {    margin-left: 0;    margin-top: 200px;    background-color: orange;    border-radius: 0;  }   100% {    margin-top: 0;  }}

نتیجه چیزی شبیه شکل زیر خواهد بود:

همانند ترنزیشن­‌ها، تعریف انیمیشن ها در CSS با استفاده از ویژگی خلاصه­‌نویسی animation راحت‌­تر است. علاوه بر این، می­‌توانید از ویژگی­‌های جداگانه موجود نیز استفاده کنید:

• animation-name: نام انیمیشن
• animation-duration: مدت زمان انیمیشن بر حسب ثانیه یا میلی ثانیه
• animation-iteration-count: تعداد دفعاتی که میخواهید انیمیشن شما تکرار شود

انیمیشن ها در CSS - سایر گزینه ها

اینها گزینه‌­های دیگری هستند که شما می­‌توانید از آنها برای کنترل انیمیشن­تان استفاده کنید.

• animation-timing-function:

Timing functionروشی است که پیشرفت انیمیشن در طول یک فریم را کنترل می‌­کند.

• animation-delay:

یک تاخیر در شروع انیمیشن تنظیم می‌کند و شروع آن را به تعویق می‌­اندازد.

• animation-direction:

کنترل نحوه پخش شدن انیمیشن: به جلو (normal، مقدار پیش فرض)، عقب (reverse) یا متناوب (alternate-reverse و alternate).

• animation-fill-mode:

این ویژگی مشخص می­‌کند که بعد از پایان انیمیشن عنصر چه styleای داشته باشد. این ویژگی می­‌تواند styleهای تنظیم­ شده توسط آخرین keyframe (forwards)، اولین keyframe (backwards)، اولین و آخرین keyframeها (both) را حفظ کند، یا حتی عنصر را به style اصلی خود تنظیم کند (none، مقدار پیش فرض).

نتیجه گیری

انیمیشن ها و ترنزیشن های CSS از رویکردهای CSS برای متحرک­‌سازی عناصر در یک صفحه وب هستند، بدون اینکه برای این کار به JavaScript نیاز داشته باشید. با استفاده از ترنزیشن در CSS، می‌توانید یک ویژگی را به تدریج (و نه به طور ناگهانی) تغییر دهید. با استفاده از انیمیشن­‌های CSS، شما می­‌توانید عنصری را متحرک کرده و ظاهر آن را به صورت فریم به فریم کنترل کنید.

آیا می‌­خواهید یک برنامه نویس حرفه‌­ای بشوید؟ پس در دوره های برنامه نویسی آنلاین من شرکت کنید. اگر  مقاله انیمیشن ها و ترنزیشن های CSS را دوست داشتید آن را با دوستانتان به اشتراک بگذارید.