سلام
معذرت بابت کم شدن فعالیت دارم روی یه پروژه کار میکنم نمیتونم زیاد بیام :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;
}