چطور یک انیمیشن fade in با css بسازیم؟ طوری که چند ثانیه بعد از رندر شدن المان، بصورت fade in نمایشش دهیم؟
- نفیسه افقی 1 سال قبل سوال کرد
- شما باید برای ارسال دیدگاه وارد شوید
بصورت زیر می توانید انیمیشن fade in را با css بسازید:
.fade-in {
opacity: 0; /* Initially hidden */
animation: fadeIn 1s ease-in-out forwards; /* Apply the animation with 1s duration */
animation-delay: 1s; /* Delay the animation start by 1s */
}
@keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
* animation-delay
تاخیر قبل از شروع انیمیشن را مشخص می کند.
*کافی است تا fade-in
را به عنوان کلاس به هر المان html ای که می خواهید این انیمیشن را اجرا کند بدهید.
- نفیسه افقی 1 سال قبل پاسخ داد
- شما باید برای ارسال دیدگاه وارد شوید