آشنایی بیشتر با 50 ویژگی جالب CSS (جلسه 5) : ویژگی animation-iteration-count و backface-visibility

- visibility ۰ mode_comment

css3 attributes

ویژگی animation-iteration-count

در جلسه قبل مقداری در مورد این ویژگی توضیح دادیم و کار اصلی اون اینه که تعداد دفعاتی که انیمیشن تعریف شده با استفاده از keyframes، اجرا میشه رو مشخص میکنه. این ویژگی در حالت پیش فرض مقدارش یک هست. یعنی اگر این ویژگی رو مشخص نکنیم، انیمیشن مورد نظر فقط یکبار اجرا میشه. اگر مثلا مقدار این ویژگی رو 2 قرار بدیم، باعث میشه که انیمیشن تعریف شده در keyframes، دو بار بصورت کامل از ابتدا تا انتها اجرا بشه. مقدار این ویژگی لازم نیست که حتما یک عدد صحیح باشه و میتونه عدد اعشاری هم باشه. مثلا اگر مقدار رو برابر با 1.5 قرار بدیم، در ابتدا یک بار انیمیشن بصورت کامل اجرا میشه و بعد از اون دوباره از ابتدا شروع میشه، ولی اینبار در وسط راه متوقف میشه. پس یعنی این انیمیشن یک بار و نیم اجرا میشه. کد زیر رو در نظر بگیرید:

همونطور که میبینید یک keyframes بنام fadeInDown ساختیم و المنت مورد نظر از حالت مخفی، نمایش داده میشه و 150 پیکسل هم به سمت پایین حرکت میکنه. این انیمیشن رو برای SVG اعمال کردیم و کاری کردیم که بصورت linear یا خطی در مدت یک ثانیه انجام بشه. همونطور که میبینید در آخر مقدار animation-iteration-count رو برابر با 1.5 قرار دادیم و با اینکار انیمیشن مورد نظر یک بار و نیم اجرا میشه. دمو و خروجی زیر رو ببینید: همونطور که دیدید یک بار بصورت کامل انجام میشه و دومین بار که میخاد اجرا بشه، در وسط راه متوقف میشه.

ویژگی backface-visibility

همونطور که میدونین با استفاده از transform ها میتونیم المنت مورد نظر رو حول محورهای مختلف بچرخونیم. این المنت مشخص میکنه که زمانی که المنت مورد نظر میچرخه و پشت اون مشخص میشه، میتونیم محتوای اون رو از پشت ببینیم یا خیر. کد زیر رو در نظر بگیرید:

میبینید که یک انیمیشن تعریف کردیم که المنت مورد نظر یک دور کامل، حول محور y یا عمودی بچرخه. اگر دقت کرده باشید ما در بالا این ویژگی رو مورد استفاده قرار ندادیم و در نتیجه حالت پیش فرض اون که مقدار visible هست، اعمال میشه و باعث میشه که ما بتونیم محتوای المنت رو از پشت هم ببینیم. خروجی بصورت زیر هست: همونطور که میبینید زمانی که المنت مورد نظر میچرخه، محتوای اون از پشت هم مشخص و قابل دیدن هست.

مقدار دیگه ای که میتونیم برای این ویژگی استفاده کنیم، مقدار hidden هست. با قرار دادن این مقدار دیگه نمیتونین از پشت محتوای المنت رو ببینید. دموی زیر رو مشاهده کنید: همونطور که دیدید زمانی که بر روی این المنتها هاور میکنیم میچرخن و محتوای اونا از پشت قابل مشاهده نیست.

اگر مقدار این ویژگی رو برابر با initial بزارید، این المنت همون مقدار پیش فرض یا visible رو میگیره و اگز مقدار اون رو برابر با inherit بزارید، این ویژگی مقدار خودش رو از المنت پدرش به ارث میبره. بهمین راحتی.

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

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

موفق باشید

یا علی

Source

comment دیدگاه کاربران

نیاز به لاگین

برای ارسال دیدگاه و یا پرسیدن سوال خود در این قسمت، باید در سایت لاگین شوید.