آموزش Transition در سی اس اس ( طراحی انیمیشن )

در این مقاله قصد داریم به دنیای زیبای طراحی صفحات وب مسافرت کنیم و کمی با چیز های جدید آشنا بشیم  .  منظور از دنیای طراحی صفحات وب چیه ؟ ما با چی صفحات وب رو طراحی میکنیم و بهترین ابزار چیه ؟ همگی با زبان طراحی صفحات وب یعنی css آشنایی دارید . بیایید به زمانی برویم که زبان سی اس اس هنوز وجود نداشت . یا زبان نشانه گذاری html به وجود نیومده بود . به چه شکلی صفحات وب را طراحی میکردند ؟ من زبان سی را خیلی وقت پیش یاد گرفتم . اما جالب اینجاست که وقتی با طراحان وب قدیمی ( کسانی که از 30 سال پیش کار میکنند ) هم صحبت میشم ، متوجه میشدم که آنها در گذشته با زبان برنامه نویسی سی صفحات وب خود را طراحی میکردند . چرا و چطور ؟ 😥

زبان نشانه گذاری html و سی اس اس یکی از رویداد های فوق العاده در دنیای طراحی وبسایته که به واسطه اینها و زبان های دیگر مانند php پلت فرم بهتری به نام وردپرس ارائه گردید . حالا که فهمیدید زبان css چیه و چه کمکی به ما در طراحی صفحات وب میکنه ، وبیت را تا انتهای این مقاله همراهی کنید . چنانچه سوالی در رابطه با سلکتور های سی اس اس و یا تگ های html داشتید ، از قسمت نظرات کاربران آن را با ما به اشتراک بگذارید . همچنین اگر هنوز نمیدونید که css چیه ، مثالی در ادامه بیان میکنم که امیدوارم باهاش کاملا متوجه بشید .

نقش سی اس اس و اچ تی ام ال در ساختن صفحات وب !

در یک صفحه وب ما چیز های مختلفی مانند منو ها ، باکس ها ، بنر ها ، متن ها و …. میبینیم. حال CSS چه نقشی در ساخته شدن این المنت ها دارد یا html در ساخت آنها چه نقشی دارید ! یک ساختمان را تصور کنید که قرار است ساخته شود . ابتدا اسکلت آن را بنا میکنند . منظورم اینه که ساختمان شامل دو بخش ، اسکلت و بدنه گوشتی است . صفحات وب هم دقیقا همینطور هستند .

اون المنت ها مانند متن ها ، لیست ها و جدول ها توسط html ساخته میشوند و یک طرح ساده از آنها مشاهده خواهیم کرد . تا اینکه بلاخره سی اس اس به داد صفحات وب میرسد و اون لایه گوشی صفحه وب را تشکیل میدهد . یک متن را فرض کنید که با اچ تی ام ساخته شده است . حال فونت ها ، استایل متن ، استایل بخش ، محل قرارگیری و …. را با استفاده از CSS مشخص میکنیم و در نهایت به یک نوشته جذاب و زیبا میرسیم .

در این مقاله به طور کلی تر میخوایم راجب یک خاصیت بسیار مهم و حیاتی برای ساخت انیمیشن ، تصاویر متحرک و … به نام Transition در CSS صحبت کنیم . به صورت اختصاصی اگر بخواهیم با css کار کنیم ، متوجه میشیم که کاربردهاش خیلی فراتر از چیزی است که ما به آن فکر میکنیم . میتونیم انیمیشن ، بنر تبلیغاتی ، تصاویر متحرک و … باهاش بسازیم و یکی از استلزامات آن وجود خاصیت Transition است .

پارامتر های خاصیت Transition در CSS و آموزش آنها

این خاصیت در سی اس اس شامل چندین ورودی یا پارامتر است . پارامتر های ورودی آن را در زیر معرفی کردیم .

1 – Property

از Property یا همان ویژگی باید برای این خاصیت تعریف و مشخص شود . حالا منظور از ویژگی چیه ؟  این ویژگی ها شامل چیا هستند ؟ به طور کلی ویژگی ها شامل Width ، Background ، Color و… بیشتر مواقع  all هستند . دقت داشته باشید که Property حتما باید مشخص شود.

2 – Timing-Function

• Ease : مقدار پیشفرض است. جلوه‎ی شروع آرام و در انتها آرام.
• Linear : جلوه‎ با سرعت یکنواخت در شروع و پایان.
• Ease-in : جلوه‎ با سرعت کم شروع و با سرعت زیاد به اتمام.
• Ease-out : جلوه‎ با سرعت زیاد شروع و با سرعت کم به اتمام.
• Ease-in-out : جلوه‎ با سرعت کم شروع ، بین انیمیشن کمی سرعت افزایش و با سرعت کم به اتمام.
• Cubic-bezier : جلوه‎ی مقادیر دلخواه شما بین 0 و 1

3 – Duration

مدت زمان اجرای Transition یعنی مدت زمانی را که می‎خواهید المان شما از Style یک به Style دو برسد. مثلا تغییر رنگ از آبی به قرمز در 5 ثانیه.

4 – Delay

این ویژگی Delay یک مکث چند ثانیه ایی (بسته به اینکه شما چه مقداری به آن بدهید ) است که برحسب ثانیه است و شما میتوانید برای انیمیشن خود تعیین کنید که با چقدر تاخیر شروع به اجرا کند . مثلا قبل از شروع انیمینش یا هرچی دلای را روی 5 ثانیه تنظیم میکنیم . بدین ترتیب با 5 ثانیه تاخیر اجرا می‎شود.