افکت bounce در CSS

CSS

توسط stackoverflow در 5 سال پیش
0 644 2 5 سال پیش
stackoverflowdreamweavermajidmagic
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:


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

خوش آمدید

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

لطفا ابتدا لاگین کنید