آیا می دانید تا کنون 8178 نفر در 16 دوره آموزشی سون لرن ثبت نام کرده اند !

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

0 286 ۲۴ بهمن ۹۵

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

:: مطالب جدید سون لرن را از طریق ایمیل دریافت کنید :

دیدگاه ها اولین دیدگاه این مطلب را ارسال کنید.

ارسال دیدگاه

ورود/عضویت سریع با اکانت فیسبوک/جیمیل شما

:: شما می توانید با استفاده از اکانت یاهو یا جیمیل خود به صورت کاملا امن، سریع و بدون نیاز به ورود اطلاعات عضو و وارد سایت شوید. در این صورت هیچ نیازی به ورود نام کاربری و رمز عبور خود نخواهید داشت و هویت شما از طریق ایمیلتان مورد تائید قرار می گیرد .
برای استفاده از این روش باید در اکانت گوگل(جیمیل) و یا یاهوی خود لاگین باشید .
عضویت/ ورود سریع با :
در حال اتصال ...

ورود به سایت

ورود سریع با :
در حال اتصال ...

جستجو در سون لرن

عبارت :
7LearnTelegram