افکت bounce در CSS

بازدید15.3kپست ها2آخرین فعالیت7 سال پیش
0
0

سلام
معذرت بابت کم شدن فعالیت دارم روی یه پروژه کار میکنم نمیتونم زیاد بیام :blushsmiley:

این همون افکتیه که در دکمه اپلود سنتراستفاده شده براتون گذاشتم تا استفاده کنید چون افکت جالبیه با تشکر از مدیر انجمن :73:

@-webkit-keyframes bounce {
    0% { -webkit-transform: scale(1.03); }
   10% { -webkit-transform: scale(1.02); }
   20% { -webkit-transform: scale(1.0); }    
   30% { -webkit-transform: scale(1.2); }
   40% { -webkit-transform: scale(1.0); } 
   50% { -webkit-transform: scale(1.1); }
   60% { -webkit-transform: scale(1.0); } 
   70% { -webkit-transform: scale(1.05);}
   80% { -webkit-transform: scale(1.0); } 
   90% { -webkit-transform: scale(1.02);}    
  100% { -webkit-transform: scale(1.0); }    
}
@-webkit-keyframes bounceh {
    0% { -webkit-transform: scale(1.0); }
   10% { -webkit-transform: scale(1.02); }
   20% { -webkit-transform: scale(1.0); }    
   30% { -webkit-transform: scale(1.2); }
   40% { -webkit-transform: scale(1.0); } 
   50% { -webkit-transform: scale(1.1); }
   60% { -webkit-transform: scale(1.0); } 
   70% { -webkit-transform: scale(1.05);}
   80% { -webkit-transform: scale(1.0); } 
   90% { -webkit-transform: scale(1.02);}    
  100% { -webkit-transform: scale(1.03); }    
}
@-moz-keyframes bounce {
    0% { -moz-transform: scale(1.09); }
   10% { -moz-transform: scale(1.02); }
   20% { -moz-transform: scale(1.0); }    
   30% { -moz-transform: scale(1.2); }
   40% { -moz-transform: scale(1.0); } 
   50% { -moz-transform: scale(1.1); }
   60% { -moz-transform: scale(1.0); } 
   70% { -moz-transform: scale(1.05);}
   80% { -moz-transform: scale(1.0); } 
   90% { -moz-transform: scale(1.02);}    
  100% { -moz-transform: scale(1.0); }    
}
@-moz-keyframes bounceh {
    0% { -moz-transform: scale(1.0); }
   10% { -moz-transform: scale(1.02); }
   20% { -moz-transform: scale(1.0); }    
   30% { -moz-transform: scale(1.2); }
   40% { -moz-transform: scale(1.0); } 
   50% { -moz-transform: scale(1.1); }
   60% { -moz-transform: scale(1.0); } 
   70% { -moz-transform: scale(1.05);}
   80% { -moz-transform: scale(1.0); } 
   90% { -moz-transform: scale(1.02);}    
  100% { -moz-transform: scale(1.04); }    
}
@keyframes bounce {
    0% { transform: scale(1.04); }
   10% { transform: scale(1.02); }
   20% { transform: scale(1.0); }    
   30% { transform: scale(1.2); }
   40% { transform: scale(1.0); } 
   50% { transform: scale(1.1); }
   60% { transform: scale(1.0); } 
   70% { transform: scale(1.05);}
   80% { transform: scale(1.0); } 
   90% { transform: scale(1.02);}    
  100% { transform: scale(1.0); }    
}
@keyframes bounceh {
    0% { transform: scale(1.0); }
   10% { transform: scale(1.02); }
   20% { transform: scale(1.0); }    
   30% { transform: scale(1.2); }
   40% { transform: scale(1.0); } 
   50% { transform: scale(1.1); }
   60% { transform: scale(1.0); } 
   70% { transform: scale(1.05);}
   80% { transform: scale(1.0); } 
   90% { transform: scale(1.02);}    
  100% { transform: scale(1.03); }    
}

استفاده: حالت عادی

.buttons {
-webkit-animation: bounce 0.8s ease-in-out;
-moz-animation: bounce 0.8s ease-in-out;
animation: bounce 0.8s ease-in-out;
-webkit-transition: 0.4s ease;
-moz-transition: 0.4s ease;
transition: 0.4s ease;
}

استفاده: حالت hover

.buttons:hover {
-webkit-animation: bounceh 0.8s ease-in-out;
-moz-animation: bounceh 0.8s ease-in-out;
animation: bounceh 0.8s ease-in-out;
-webkit-animation-fill-mode:forwards;
-moz-animation-fill-mode:forwards;
animation-fill-mode:forwards;
-webkit-transition: 0.4s ease;
-moz-transition: 0.4s ease;
transition: 0.4s ease;
}
0

عالیه :flower:


شهادت امام جعفر صادق رو تسلیت میگم

0

20 20 عالی

سوال برنامه نویسی دارید؟

هیچ وقت در پرسیدن سوال شک نکنید

خوش آمدید

برای طرح سوال، ایجاد بحث و فعالیت در سایت نیاز است ابتدا وارد حساب کاربری خود شوید. در صورتی که هنوز عضو سایت نیستید میتوانید در عرض تنها چند ثانیه ثبت نام کنید.