Create successful ePaper yourself
Turn your PDF publications into a flip-book with our unique Google optimized e-Paper software.
مبحث نزدهم: Transition<br />
خاصیت Transition<br />
عامل اصلی در افکت های<br />
نماید.<br />
از جمله خاصیت های میباشد که تازه وارد دنیایی ویب گردیده و این خاصیت<br />
<strong>CSS</strong>3<br />
میباشد و بدون این خاصیت شما نمیتوانید هیچ افکتی را تطبیق<br />
قاعده دستوری:<br />
آموزش کاربردی <strong>CSS</strong>3<br />
Transform خاصیت های زیر را دارا میباشد:<br />
Transition: Property | duration | timing-function | delay;<br />
Transition-property<br />
با استفاده از این خاصیت میتوانید تعیین کنید که انیمیشن روی کدام خاصیت اختصاص داده<br />
شده به عنصر اعمال شود ، مثال باالی خاصیت روی width عنصر اعمال شود یا روی height عنصر<br />
یا color عنصر و … .<br />
در صورتی که مقدار این خاصیت را برابر با all قرار بدهید تمامی خاصیت<br />
ها و مقادیر و استایل یک عنصر را تحت تاثیر انیمیشن قرار میدهد و انیمیشن را روی تمامی<br />
خاصیت ها و مقادیر عنصر اجرا می کند.<br />
Transition-duration<br />
این خاصیت مدت زمان اجرای یک انیمیشن را مشخص می کند که بر حسب ثانیه و میلی ثانیه<br />
مشخص میشود.<br />
Transition-timing-function<br />
این خاصیت شامل مقادیر زیر میشود و سرعت اجرای افکت را تعیین می کند:<br />
linear<br />
:در صورت استفاده از این مقدار انیمیشن از ابتدا تا انتها با سرعت یکسان حرکت می کند<br />
و انجام میشود.<br />
Ease :این مقدار، مقدار پیشفرض این خاصیت است. یعنی انیمیشن با سرعت نسبتا کم شروع<br />
میشود و سریع سرعتش افزایش پیدا میکند و وقتی به انتها میرسد دوباره سرعتش کم میشود.<br />
ease-in<br />
:انیمیشن با سرعت کم شروع میشود و با سرعت زیاد به اتمام میرسد.<br />
121<br />
”رسولی” نویسنده: فردوس
Change language