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

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

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

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