?
Animationیکی از قابلیت های CSS3می باشد که امکان طراحی جذاب و محرک عناصر صفحه را برای کاربران وب فراهم کرده است.در تعریف animation از کلمه کلیدی @keyframes استفاده می شود.در واقع با این پیشوند به مرورگر می فهمانیم که در حال تعریف animation هستیم. به مثال زیر توجه نمایید:
مثال :
@keyframes bounce
اینترنت اکسپلورر هنوز از دستور @keyframes یا خاصیت انیمیشن پشتیبانی نمی کند بنابراین برای نمایش صحیح افکت ها نیاز به نوشتن پیشوند -ms- می باشد.فایر فاکس به پیشوند -moz- ، کروم و سافاری به پیشوند -webkit- و اپرا به پیشوند -o- نیاز دارد.
مثال :
-ms-@keyframes bounce
زمانی که انیمیشن با دستور @keyframesایجاد شد ،می بایست از آن در یک تگ استفاده کنیم ، در غیر این صورت انیمیشن مؤثر نخواهد بود.
انیمیشن را حداقل با مشخص کردن این دو خاصیت انیمیشن ، اجرا نمایید:
مثال:
animation: myfirst 5s
نکته : شما باید نام و مدت زمان انیمیشن را تعریف کنید. اگر مدت زمان تعریف نشود انیمیشن اجرا نخواهد شد. چون مقدار پیش فرض 0 است.
یک انیمیشن حرکتی است که باعث می شود یک عنصر به تدریج از یک استایل به استایلی دیگر تغییر یابد. شما می توانید عناصر را به هر استایلی به دفعات دلخواه تغییر دهید.
در زمان تعریف keyframes ما میتوانیم از from برای تعریف شرایط شروع انیمیشن و از to برای شرایط پایان انیمیشن استفاده کنیم، وقتی از from و to استفاده می کنیم وابسته به مدت زمان تعیین شده، مرورگر به صورت خودکار زمان را طوری تنظیم میکند که از حالت from تا حالت toدر مدت زمان تعریف شده اجرا شود.
بجای from و to ما میتوانیم از % نیز استفاده کنیم. مقدار 0% شروع انیمیشن و مقدار 100% پایان انیمشین را تعیین میکند.در هنگام استفاده از % ما می توانیم مراحل انمیشین را به 100 قسمت تقسیم کنیم، و در هر قسمت کدهای مورد نظرمان را قرار دهیم
0% آغاز انیمیشن است و 100% زمانی است که انیمیشن کامل می شود.
مثال :
@keyframes slideInUp {
0% {
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
visibility: visible;
}
100% {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
انیمیشن را مشخص می کند
@keyframes
برای مختصر نویسی ویژگی های انیمیشن
animation
نام انیمیشن را مشخص می کند.
animation-name
مشخص می کند که یک انیمیشن چند ثانیه یا میلی ثانیه طول می کشد تا کامل شود.
animation-duration
چگونگی نمایش انیمیشن در طول اجرا را مشخص می کند. پیش فرض "ease" است.
animation-timing-function
زمان شروع انیمیشن را تعریف می کند.پیش فرض 0 است.(مشخص می کند که چقدر از نمایش اولیه انیمشین تا شروع اجرای آن تاخیر داشته باشد)
animation-delay
تعداد دفعات نمایش انیمیشن را مشخص می کند . پیش فرض 1 است
animation-iteration-count
مشخص می کند که انیمیشن به صورت معکوس نیز اجرا شود یا نه.پیش فرض "normal" است.
animation-direction
مشخص می کند که آیا انیمیشن اجرا شود یا متوقف شود . پیش فرض "running" است.
animation-play-state
