حرکت اشیا با CSS3

​

با استفاده از ویژگی animation در ، میتونید هر عنصر موجود در صفحه رو در زمان دلخواه حرکت بدید یا هر تغییری تو CSS اون عنصر به وجود بیارید. درواقع با کدهای میخوایم یه خط زمانی ( Time Line ) ایجاد کنیم

این قابلیت فعلا فقط تو مرورگرهای Webkit

برای شروع، یه div درست میکنیم:
HTML:










1
<div class=\div1\></div>

CSS:










1
.div1{width:300px; height:100px; background:#1B86F1;}

300پیکسل طول ، 100پیکسل ارتفاع و رنگ آبی.

حالا باید یه اسم برای این انیمیشن انتخاب کنیم. مثلا anime1:










1
.div1{width:300px; height:100px; background:#1B86F1;






2
-webkit-animation-name:anime1;}

زمان انیمیشن رو تعیین میکنیم. من 5ثانیه درنظر میگیرم:










1
.div1{width:300px; height:100px; background:#1B86F1;






2
-webkit-animation-name:anime1;






3
-webkit-animation-duration:5s;}

*همین کد رو میشه به صورت خلاصه هم نوشت:










1
.div1{width:300px; height:100px; background:#1B86F1;






2
-webkit-animation:anime1 5s;}

حالا مرحله دوم، ساخت تایم لاین!










1
@-webkit-keyframes anime1{}

*دقت کنید که anime1 همون اسم انیمیشنه.

حالا میخوایم با لود شدن صفحه ، طول div1 در 5 ثانیه،از 50پیکسل به 300پیکسل تغییر کنه؛
پس این کد رو به @-webkit-keyframes اضافه میکنیم:










1
@-webkit-keyframes anime1{






2
from {width:50px;}






3
to {width:300px;}






4
}

آماده شد! حالا یه div داریم که وقتی صفحه لود میشه ، از 50 پیکسل به 300 پیکسل تغییر سایز میده

​

حالا میخوایم یکم پیشرفته تر کار کنیم؛
میتونیم با یه تایم لاین بهتر، روی کل مدت زمان انیمیشن ، تسلط داشته باشیم:

به جای استفاده از from و to ، به این صورت عمل میکنیم:










1
@-webkit-keyframes anime1{






2
0%{width:50px;}






3
100%{width:300px;}






4
}

هنوز همون حالت تکرار میشه، اما میتونیم چندتا keyframe به این تایم لاین اضافه کنیم:










1
@-webkit-keyframes anime1{






2
0%{width:50px;}






3
20%{width:30px;}






4
55%{width:200px;}






5
90%{width:180px;}






6
100%{width:300px;}






7
}

* تو هر کدوم از keyframe ها ، به جای width میتونید هر خاصیت CSS مربوط به div1 رو تغییر بدین.

برای کلاس .div1 میتونیم چند خاصیت اختیاری هم برای انیمیشن قرار بدیم:
[*]میزان تکرار انیمیشن









1
-webkit-animation-iteration-count:1;

مقدار پیشفرض این خاصیت 1 هست. برای تکرار شدن بی‌نهایت ، از کلمه infinite استفاده می‌کنیم:










1
-webkit-animation-iteration-count: infinite;
[*]جهت تکرار انیمیشن
وقتی با استفاده از -webkit-animation-iteration-count بیشتر از یک بار انیمیشن تکرار میشه، میتونیم با استفاده از -webkit-animation-direction مشخص کنیم که آیا هر بار به همون صورت عادی نمایش داده بشه ، یا keyframe های تایم لاین از آخر به اول ، به صورت معکوس نمایش داده بشه!
به زبان ساده:










1
-webkit-animation-direction:normal;

به صورت عادی تکرار بشه










1
-webkit-animation-direction:alternate;

وقتی یک بار تایم لاین به آخر رسید، دور بعد، انیمیشن از آخر به اول انجام بشه
[*]زمان شروع انیمیشن









1
-webkit-animation-delay:3s;

یعنی انیمیشن با 3 ثانیه تاخیر شروع بشه.
[*]وضعیت اجرا









1
-webkit-animation-play-state:running;

حالت پیشفرض running هست ، به این معنی که با لود شدن صفحه اجرا بشه.
مقدار paused باعث میشه انیمیشن در ابتدا pause