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

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

[CSS]

@-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); }
}

[/CSS]

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

[CSS]

.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;
}
[/CSS]

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

[CSS]
.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;
}
[/CSS]

مردم دنیا 10 دسته هستند: کسانی که باینری میفهمند و کسانی که باینری نمیفهمند !
پاسخ
#2
Note 
عالیه :flower:
_________
شهادت امام جعفر صادق رو تسلیت میگم

پاسخ
#3
Note 
20 20 عالی

پاسخ
ایجاد موضوع جدید   پاسخ به موضوع  

کاربرانِ درحال بازدید از این موضوع:   1 مهمان