اخبار

     تفاوت transition با animation

     ۱۳۹۵-۰۵-۱۲

تفاوت transition با animation

تفاوت transition با animation

شاید برای بسیاری از شما که شروع به یادگیری css3 نموده اید تفاوت transition با animation  قابل توجه و زیاد نباشد . درواقع هم همینگونه است ، تفاوت زیادی بین این دو خصوصیت css3 وجود ندارد . در این مطلب به این موضوع می پردازیم ، با هنرتک همراه باشید.

چرا transition و animation ؟

وقتی درحال طراحی یک سایت و یا زیبا سازی سایت هستید ، حتما به فکر ایجاد افکت های حرکتی و تغییر وضعیت آیتم های موجود در صفحه خواهید بود. تغییر در وضعیت ، شکل ، مکان ، رنگ و یا حالت و … در css3 با استفاده از transition و animation انجام می شود.

برخی از شباهت ها

هر دوی اینها برای تغییر از یک وضعیت به وضعیت دیگر به وجود آمده اند.

هر دو قابلیت تنظیم زمان را برای تغییر وضعیت دارند.یعنی می توانیم مشخص کنیم در چه فاصله زمانی تغییر صورت بگیرد.

و …

برخی از تفاوت ها

transition را می توان یک عکس العمل نامید. یعنی شما باید عملی انجام دهید تا عکس العمل به وجود بیاید . پرکاربردترین حالتی که عکس العمل رخ می دهد زمانی است که شما موس را بروی یک آیتم می برید (hover) و یا زمانی که روی یک آیتم کلیک می کنید.

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

حلقه (loop)

این قابلیت تنها برای animation وجود دارد و transition نمی تواند بیش از یک بار تکرار شود. در انیمیشن با استفاده از خصوصیت animation-iteration-count میتوانید تعداد دفعاتی که می خواهید انیمیشن تکرار شود را مشخص کنید. به عنوان مثال

animation-iteration-count:2;

باعث می شود که انیمیشن دو بار تکرار شود و یا

animation-iteration-count:infinite;

باعث می شود که انیمیشن بدون توقف و برای همیشه اجرا شود.

keyframe ها

این قابلیت نیز تنها در انیمیشن وجود دارد و ترنزیشن نمی تواند keyframe داشته باشد. در ترنزیشن شما نمی توانید بین نقطه شروع و پایان تغییر چندانی ایجاد کنید. ترنزیشن به سادگی از یک نقطه شروع و در نقطه ای دیگر پایان می یابد و بین این دو نقطه هیچ تغییر قابل اعمال نیست. اما در انیمیشن این امکان وجود دارد.
در مثال پایین مربع بالایی دارای ترنزیشن و مربع پایینی دارای انیمیشن است. برای دیدن تغییر مربع اول باید موس را بروی آن ببرید.

See the Pen transition and animation by Honartech (@Morteza930) on CodePen.0

مطالب بیشتر در زمینه وب دیزاین

منبع : هنرتک

 

 

ویدیو ها ، ترفندها و اخبار فن آوری روز دنیا در کانال تلگرام هنرتک

  1. تجهیزات آشپزخانه های صنعتی :

    خیلی عالی بود تشکر

دیدگاه خود را بیان کنید

@

نرم افزار پیشنهادی