قابلیتهای CSS3 – درباره CSS Transitions
نوشته فرهاد عیدی • 16 مرداد 1390
به احتمال زیاد تا کنون وبسایتها و وبلاگهای گوناگونی را دیدهاید که وقتی موس را روی لینکها، تصاویر، متنها و … میبرید به جای آنکه همان لحظه رنگ آنها عوض شده و حالتشان تغییر کند، این عمل در یک برهه زمانی یک یا دو ثانیهای اتفاق میافتد و افکت زیبایی به آن میبخشد.
به عنوان مثال اگر در آخرین نسخه از مرورگرهای کروم، فایرفاکس یا اپرا وبلاگینا را مشاهده میکنید، با بردن نشانگر موس روی تیتر همین مطلب متوجه منظورم خواهید شد. به راحتی متوجه میشوید که به جای اینکه تغییرات مربوط به Hover شدن تیتر مطلب در یک لحظه انجام شود، این عمل تا دو ثانیه به طول میانجامد و باعث ایجاد افکتی زیبا میشود.
اما چگونه باید این کار را انجام دهیم؟ در نسخهی جدید CSS یعنی CSS3 یک قابلیت با نام CSS Transition اضافه شده است که کار آن دقیقا همین است. یعنی شما میتوانید یک فاصله بین تغییری که قرار است ایجاد شود به وجود آورید. مثالی میزنم که بهتر متوجه شوید:
فرض کنید لینکهای شما به رنگ آبی در صفحات وب مشخص شدهاند. شما میخواهید وقتی نشانگر موس روی آن میرود لینک شما تغییر رنگ داده و به رنگ قرمز تبدیل شود. در حالت عادی، به محض رفتن موس روی لینک، رنگ آن تغییر میکند اما در صورتی که از قابلیت CSS Transition استفاده کنید بستگی به مقادیر داده شده، این تغییر در یک بازهی زمانی انجام میپذیرد. به نمونه زیر نگاه کنید:
.code {
transition-property: all;
transition-duration: 2s;
transition-timing-function: linear;
transition-delay:1s;
}
یا همچنین میتوانید تمام دستورات بالا را در یک سطر به صورت زیر به کار ببرید:
transition: all 2s linear 1s;
این دستور چهار مولفه دارد که در ادامه به توضیح هریک از آنها میپردازیم:
transition-property
در این دستور مشخص میکنیم کدام یک از ویژگیهای عنصر باید در دستور کار این قابلیت قرار گیرند. شما میتوانید فقط width یا height یا Background یا عبارات دیگر را در این دستور قرار دهید و اگر مقداری برای این دستور قرار ندهید، همهی ویژگیهای عنصرتان در دستور کار transition قرار خواهند گرفت. مثلا در عنصر زیر، فقط دستور width به صورت transition اجرا شده است پس هنگام ایجاد افکت، ارتفاع و رنگ آن جزو دستور کار قرار نمیگیرد و به صورت لحظهای تغییر میکند.
transition-duration
این دستور مشخص میکند تغییرات روی عنصر شما در چند ثانیه اعمال شود. شما عدد مورد نظر را بر حسب ثانیه باید وارد نمایید. به عنوان مثال باکس زیر طوری مقداردهی شده است که در 2 ثانیه رنگ آن تغییر کند. با نگه داشتن نشانگر موس روی آن میتوانید شاهد این تغییر باشید.
transition- timing-function
شاید توضیح این قسمت کمی سخت باشد. با این دستور شما نحوهی اعمال تغییرات در بازهی زمانی داده شده را مشخص میسازید. یعنی ممکن است بخواهید که در تمام مدت تغییرات، سرعت تغییرات ثابت باشد بنابراین از دستور linear استفاده میکنید. اگر دوست داشته باشید در ابتدا کند، سپس تند شود از دستور ease-in و اگر خواستید بالعکس این قضیه باشد از ease-out استفاده میکنید و همینطور دستورات دیگر که میتوانید نمونهی کاملا واضح آن را در این صفحه مشاهده نمایید.
transition-delay
با این دستور مشخص میسازید بعد از چه مدت عنصر شما شروع به تغییر کند. به عنوان مثال در جعبهی زیر این زمان در 2 ثانیه تنظیم شده است. یعنی با نگه داشتن نشانگر موس به مدت 2 ثانیه روی آن، رنگ جعبه شروع به تغییر میکند.
البته دستورهای دیگری نیز برای ایجاد افکتها در CSS3 وجود دارند که در مقالات بعدی به بررسی آنها خواهیم پرداخت.
مرتضی
خیلی عالی بود واقعا ممنون
نوژن
با سلام . ممنون . مقاله ی بسیار جالبی بود . من الان توی CSS سایتم امتحان کردم و قسمتی که a:hover بود استفاده کردم ولی عمل نکرد . این باکس هایی که گذاشتین رو با transition می بینم ولی تیترِ مطالبتون رو عادی و بدونِ transition می بینم . با chrome و Firefox هم امتحان کردم . مشکل از کجا می تونه باشه ؟
با تشکر
علی
بسیار عالی. مرسی هزارتا
فرهاد عیدی
سلام. در قسمت تیتر مطالب در قسمت هاور شدن تعداد کامنت ها می تونید این قابلیت رو مشاهده کنید. در رابطه با کار نکردن روی صفحه ی خودتون هم اگر امکان داره کدتون رو برام ایمیل کنید تا بهتر متوجه مشکلتون بشم.
امیر
واقعاً جالب بود دستتون درد نکنه. فقط از آقای عیدی خواهشی داشتم من دنبال یک کتاب خوب و مفید برای سی اس اس 3 میگردم ترجیحاً فارسی آیا تا الان منبع فارسی برای این ورژن نوشته شده که واقعاً بدرد بخور باشه؟ همچنین برای اچ تی ام ال 5 کتاب فارسی موجود هست با اینکه میدونم استاندارد نشده. اگر میشه جواب رو هر یک از دوستانی که اطلاعی دارن برام ایمیل بفرماین ممنون میشم
[email protected]
میرزا جواد
مرسی واقعآ جالب بود
فرهاد عیدی
سلام دوست عزيز. فكر نميكنم كتاب فارسي در رابطه با HTML5 و CSS3 در حال حاضر در بازار موجود باشد اما فكر ميكنم آقاي عبدالعلي كتابي در دست ترجمه در رابطه با اين موضوعات داشته باشند كه در آيندهاي نزديك منتشر خواهد شد.
فعلا بهترين گزينه براي يادگيري شما، وبسايتهاي اينترنتي و مقالات آنلاين هستند كه اگر كتابي هم منتشر شود مرجع آن همين مقالات خواهد بود.
موفق باشيد
مسعود
با سلام خدمت مدیریت محترم وبلاگینا …
سایت که خیلی عالیه ، ولی یه مشکل کوچیک اون پایین هر پستی من رو آزار میده : “لایک” …
ببخشید اون فیسبوکه که لایک داره ، و ما ایرانی هستیم ، حدوده 7 ، 8 کلمه ی معادل در زبان خودمون وجود داره ، به نظره من بهتره از اونها استفاده کنیم …
کلمات معادل : جالب ، دوست دارم ، محبوب و و و
که درسته یه سریش ریشش عربیه ولی هر چی باشه از این لایک انگلیسی بهتره
باتشکر
سامان
خیلی خوب بود لطفا بیشتر درباره css3و html5مقاله بگذارید
محمد
به نقل از دوست عزیز آقا مسعود که گفته است : اون فیسبوکه که لایک داره ، و ما ایرانی هستیم ، حدوده 7 ، 8 کلمه ی معادل در زبان خودمون وجود داره ، به نظره من بهتره از اونها استفاده کنیم …
کلمات معادل : جالب ، دوست دارم ، محبوب , می پسندم و …
هـــــــــــر کسی با این گفته موافق است
این نظر را لایک کند .
طاهره
عالی بود