Animation در CSS3

این تاپیک 6 پاسخ و 3 مشارکت کننده دارد . آخرین آپدیت توسط :  علی امینی ،‏ 3 سال و 5 ماه پیش .

این تاپیک تاکنون 849 بازدید داشته است .

نویسنده پست
دوشنبه ، 8 جولای 2013     8:55 ق.ظ #


حسین محمدی

Subscriber
482 پست60 تاپیک

سلام دوستان

خصوصیت animation یه مقدار میگیره به نام function.....

کار این function چیه؟لطفا دقیق توضیح بدید...

مقدارهاش که اینه

 

1  تشکر
دوشنبه ، 8 جولای 2013     9:31 ق.ظ #


علی امینی

Author
VIP
146 پست50 تاپیک

سلام

مثلا شما یه انیمیشن تعریف میکنید به این صورت:


@keyframes (یا همون function) مشخص میکنه که ما می خواهیم یک انیمیشن تعریف کنیم
و عبارت بعد از اون نام @keyframes (یا نام function ) رو مشخص میکنه که anim1 هستش.
خب حالا یک انمیشن تعریف کردیم ولی این انیمیشن هیچ کاری برای ما انجام نمیده چون فراخوانی نشده.

باید الان این انیمیشن و فراخوانی کنیم:

 

 

[nt]

#MyID{animation : anim1 5s;}

[/nt]

در کد بالا بعد از animation نام انمیشنی که در اول تعریف کردیم آوردیم و بهش گفتیم در مدت 5 ثانیه اجرا بشه.

البته در کد های بالا باید هم @keyframes و هم anmation رو برای همه ی مرورگر ها فراخوانی کنی وگرنه انمیشن کار نمیکنه.

3  تشکر
دوشنبه ، 8 جولای 2013     9:41 ق.ظ #


علی امینی

Author
VIP
146 پست50 تاپیک

ببخشید این کد دومی هر کاری میکنم درست نوشته نمیشه این کد همون کد فراخوانیه انیمیشن هست. اگه دیدید تو یه خط نوشته نشده شما فرض کنید در یک خط نوشته شده.(این کد به جای نکته ی بالاست):

2  تشکر
دوشنبه ، 8 جولای 2013     10:02 ق.ظ #


طاها دریس

Authorplus
VIP
451 پست5 تاپیک

سلام. کار این [quote=12588]سلام دوستان خصوصیت animation یه مقدار میگیره به نام function..... کار این function چیه؟لطفا دقیق توضیح بدید... مقدارهاش که اینه

[/quote]

سلام.

کار این مقادیر تقسیم بندی انیمشن به سه  قسمت است

1.شروع

2. میانه (وسط)

3. انتها

سپس زمانی که برای اجرای انمیشن درنظر گرفتیم را بر روی این سه قسمت بر اساس مقادیر فانکشن تقسیم میکند.

----

برای بهتر متوجه شدن، مثال زیر رو ببنید.

با اینکه زمان برای همه آن ها 2ثانیه است، اما متفاوت عمل می کنند.

(روی باکس ها، hover کنید)

پیوست ها:
You must be logged in to view attached files.
2  تشکر
دوشنبه ، 8 جولای 2013     10:47 ق.ظ #


علی امینی

Author
VIP
146 پست50 تاپیک

ببخشید من  function در سی اس اس و جاوا اسکریپت و پی اچ پی رو با هم قاطی کردم.

این یه مثال ساده.این کدش میتونید دمو این کد رو در فایل های پیوستی ببینید.

پیوست ها:
You must be logged in to view attached files.
4  تشکر
دوشنبه ، 8 جولای 2013     12:03 ب.ظ #


حسین محمدی

Subscriber
482 پست60 تاپیک

[quote=12591]سلام. کار این

shatel نقل قول:
سلام دوستان خصوصیت animation یه مقدار میگیره به نام function..... کار این function چیه؟لطفا دقیق توضیح بدید... مقدارهاش که اینه
ease_ease-in_ease-out_ease-in-out_linear

سلام. کار این مقادیر تقسیم بندی انیمشن به سه قسمت است 1.شروع 2. میانه (وسط) 3. انتها سپس زمانی که برای اجرای انمیشن درنظر گرفتیم را بر روی این سه قسمت بر اساس مقادیر فانکشن تقسیم میکند. ---- برای بهتر متوجه شدن، مثال زیر رو ببنید. با اینکه زمان برای همه آن ها 2ثانیه است، اما متفاوت عمل می کنند. (روی باکس ها، hover کنید) [/quote]

بازهم سلام

ولی چه فایده ای داره انیمیشن به چند قسمت تقسیم بشه؟

یعنی فرق بین مقادیر چیه؟

مثلاً فرق بینease-out با ease؟

3  تشکر
دوشنبه ، 8 جولای 2013     5:51 ب.ظ #


علی امینی

Author
VIP
146 پست50 تاپیک

یه توضیح مختصر:

ease: در شروع سرعت بالاست و در پایان هم پایین ؛

linear: سرعت از ابتدا تا انتها به یک صورت است؛

ease-in: در شروع سرعت کمه؛

ease-ou: در پایان سرعت کم میشه؛

ease-in-out: در شروع و پایان سرعت پایینه و در وسط کار سرعت بالاست.

5  تشکر
پست 1 تا 7 (از مجموع 7 پست)

برای پاسخ دادن به این تاپیک باید وارد سایت شوید .