انیمیشن در CSS

[aminaki]

با سلام خدمت دوستان :

میخواستم یه دکمه طراحی کنم که وقتی موس بره روش DIV بزرگتر بشه یا فقط width آن بیشتر شود و وقتی از روی آن موس رفت به حالت اول برگردد . من این کار را انجام دادم ولی عمل بزرگشد آن به سرعت انجام میشود میخواهم کمی آرام تر مثل یه افکت عمل کند . خواهشن راهنمایی کنید .
لینک زیر رو نگاه کنید وقتی موس میرود روی دکمه ها ، به چه شکل تغییر سایز میدهند (فقط هم با CSS است)
: DEMO (http://tempworld.gegahost.net/demo/Minimalistic%20Animated%20Menu/Minimalistic%20Animated%20Menu/Color-White%20Version/index.html)

Download Page (http://www.tempworld.ir/post/233/Minimalistic-Animated-Menu.html/#post)
من دنبال طراحی دکمه هایی مثل لینک بالا هستم . ولی دوست دارم بفهمم که چیکار میکنم . ولی به کد اون که نگاه کردم خیلیا رو نفهمیدم . اگه میشه فقط بگید عمل بزرگ شدن و به حالت اول برگشتن دکمه رو چطوری مثل لینک بالا دربیارم.
و اگه بخوام width از یک سمت اضافه بشه چطور ؟؟

[moalla]

اگه فقط css باشه احتمالا با css3 این کارو کرده
اما خوب چرا از جی کوئری استفاده نکنید؟
باید از رویداد Hover استفاده کنید که دوتا فانکشن میگیره. تو یکیش حالت عادی تعریف میشه و تو اون یکی حالتی که موس روش قرار میگیره. مثال:
http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_event_hover
اما اینکه به تدریج عرض و ارتفاع زیاد میشه با استفاده از افکت animation قابل انجامه:
http://www.w3schools.com/jquery/jquery_animate.asp
شما هر تعداد css رو میتونی توش تعریف کنی که یکدفعه ای اجرا نمیکنه و خیلی ملایم میبره به cssجدیدی که بهش میدین
خلاصه این دوتا hover و animation رو ترکیب کنید اونی که میخواید رو بدست میارید
css3 بخواید استفاده کنید بروزرهای خیلی کمتری ساپورتش میکنن

[aminaki]

نمیخوام تو سایت از JQuery استفاده کنم . از CSS3 استفاده کردم (animation) که :
موس میره روش کار میکنه ولی وقتی موس هنوز روی دکمه یا همون (DIV) قرار داره ، افکت اجرا میشه . و بدون اینکه موس کنار رفته باشه دکمه عرض یا اندازش به حالت اول برمیگرده اونم بدون افکت و به صورت درجا ، در صورتی که ، زمانی باید به حالت اول برگرده که موس بره کنار .
؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟

[tamafi6]

به كدزيرنگاه كن


div{
-webkit-transition:0.5s;
}
div:hover{
-webkit-transform: scale(1.4) ;
}

اين كدcss3 هست براي ساخت حركت انتقالي هست hoverبراي جواب موس هست‎ transformيعني حركت رابه صورت انتقالي انجام بدهscale‏ يعني به تصويربزرگنماي بده كه 4 به 1 هست يعني چهاربرابربزرگترtransition‏ هم براي مدت زمان حركت انتقالي استفاده ميشه كه درنمونه بالا 0.5 ثانيه است