ساخت انیمیشن (Animation) به صورت ظاهر شدن تدریجی عنصر (انیمیشن Fade in)، با کلاس w3-animate-opacity ، در W3.CSS

با استفاده از کلاس w3-animate-opacity در چارچوب W3.CSS ، می توانیم یک انیمیشن (Animation) به صورت ظاهر شدن تدریجی عنصر (انیمیشن Fade in) بسازیم.

برای این منظور، کلاس w3-animate-opacity را به صورت زیر برای عنصر مورد نظر ذکر می کنیم :

ظاهر شدن تدریجی عنصر بر اساس تغییر تدریجی شفافیت عنصر از 0 به 1 در مدت زمان 0.8 ثانیه می باشد (میزان شفافیت به اندازه 0 به معنای کاملا ناپدید شدن عنصر و میزان شفافیت به اندازه 1 به معنای نمایش کامل عنصر بدون هیچگونه شفافیت می باشد).

به مثال زیر توجه کنید :

مثال

بخش مهم کدها :

کد کامل صفحه HTML :

نتیجه :

این صفحه را دوباره اجرا کنید تا چگونگی نمایش انیمیشن (Animation) در ابتدای بارگذاری صفحه را مشاهده نمایید :

خطا - صفحه را دوباره بارگذاری کنید
منابع و لینک های مفید
نویسنده علیرضا گلمکانی
شماره کلید 26296
گزینه ها
به اشتراک گذاری (Share) در شبکه های اجتماعی
نظرات 0 0 0

ارسال نظر جدید (بدون نیاز به عضو بودن در وب سایت)