آموزش CSS 3 - ساخت انمیشن و تصاویر متحرک - مرحله دوم
خاصیت animation
خاصیت animation :
در مرحله اول از طراحی تصاویر متحرک و انمیشن در CSS 3 ، یا ساختار keyframes @ آشنا شدید . در این ساختار ، تغییراتی که می
خواستید در فرآیند انمیشین بر روی عنصر اعمال شود را تعیین می کردید . پس از تعیین
این تغییرات ، بایستی در مرحله دوم ، ساختار keyframes @تعیین شده را به عنصر مورد
نظرتان مرتبط سازید .
توسط خاصیت animation در CSS 3 ، ساختار keyframes @ مورد نظرتان را به عنصر مرتبط
می سازید . در این خاصیت همچنین می توانید نام ساختار keyframes @ مورد نظر ، مدت زمان
اجرای افکت ، تاخیر احتمالی در فرآیند اجرای آن و یا تعداد دفعات تکرار را تعیین نمایید
.
شکل کلی استفاده و ساختار دستوری خاصیت animation به صورت زیر است :
|
Syntax
|
animation : name duration timing-function delay
iteration-count direction ;
|
نکته مهم : خاصیت animation مخفف و ساده شده 6 خاصیت زیر است
:
- animation-name
- animation-duration
- animation-timing-function
- animation-delay
- animation-iteration-count
- animation-direction
شما می توانید این 6 خاصیت را به صورت تک تک مقدار دهی کرده و یا اینکه شش مقدار آنها
را در این حالت کوتاه شده به ترتیب قرار دهید . توضیحات کامل راجع هر یک از این خاصیت
را در صفحات مربوط به آنها قرار داده ایم . برای دریافت اطلاعات راجع به هر کدام بر
روی نام آن کلیک نمایید .
|
توضیح
|
این پارامتر نام ساختار keyframes @ مورد نظر برای اجرا بر روی عنصر را تعیین می کند
. تغییرات پیش بینی شده در ساختار ، در هنگام اجرای فرآیند بر روی عنصر مورد نظر اعمال
خواهند شد .
تعیین این پارامتر اجباری است .
|
این خاصیت مدت زمانی که طول می کشد تا عنصر از حالت اول به حالت دوم تغییر وضعیت داده
و تغییرات بر روی آن اعمال شوند ، را بر حسب ثانیه تعیین می کند . مسلما هر چه مقدار
آن بیشتر باشد ، این عمل به صورت آهسته تر انجام می شود .
تعیین این پارامتر اجباری است ، اگر مقدار آن را تعیین نکنید ، مقدار 0 را خواهد داشت
و در این حالت هیچ افکت تصویری و انمیشین نخواهیم داشت .
|
|
این پارامتر تعیین کننده افکت تصویری برای انجام عملیات است .
|
|
این پارامتر مدت زمان تاخیر انجام افکت ، پس از درخواست آن به مرورگر را تعیین می کند
. برای مثال اگر 3 ثانیه تعیین شود ، افکت پس از 3 ثانیه فعال خواهد شد .
|
|
این پارامتر تعداد دفعاتی که قرار است افکت تصویری تکرار شور را تعیین می کند . می
توان دفعات محدودی برای آن تعیین کرد و یا انجام آن را بی نهایت قرار داد .
|
|
این پارامتر تعیین می کند که آیا افکت در جهت عادی انجام شود . یا در حالت برعکس .
|
در مثال های عملی در انتهای صفحه ، کاربرد این خاصیت را به صورت عملی به شما نمایش
داده ایم .
پشتیانی در مرورگر های مختلف :
متاسفانه این ساختار در مرورگر اپرا و IE پشتیانی نمی شود ( مگر در نسخه 10 در آینده
) و توسط هیچ کدام از مرورگر های مطرح دیگر نیز به صورت عادی پشتیانی نمی شود . برای
پشتیبانی در مرورگرهای مختلف باید برای هر کدام ، کد لازم آنها که در جدول زیر آمده
را استفاده نمود :
|
مرورگر فایرفاکس با اعمال یک تغییر در کد خاصیت از آن پشتیانی می کند . برای پشتیانی
این مرورگر باید خاصیت را به صورت moz-animation- بنویسید .
|
|
این خاصیت پشتیانی نمی شود .
|
|
این خاصیت پشتیانی نمی شود .
|
|
مرورگر کروم با اعمال یک تغییر در کد خاصیت از آن پشتیانی می کند . برای پشتیانی این
مرورگر باید خاصیت را به صورت webkit-animation- بنویسید .
|
چند مثال از کاربرد خاصیت animation :
در مثال های زیر ابتدا چند ساختار keyframes @ را تعیین کرده و آنها را به وسیله خاصیت
animation به عنصر مورد نظرمان متصل کرده ایم . این کدها باعث ساخت تصاویر متحرک با
عناصر شده است :
مثال 1 : در مثال اول یک ساخنار تعیین کرده ایم که پس زمینه
یک عنصر را در مدت 3 ثانیه و فقط برای 1 بار از رنگ قرمز به رنگ زرد تغییر
می دهد . در این ساختار کد لازم برای سازگاری با انواع مرورگرها قرار داده شده است
:
< html >;
< head >
< style >
@keyframes chColor
{
from {background: red;}
to {background: yellow;}
}
@-moz-keyframes chColor /* Firefox */
{
from {background: red;}
to {background: yellow;}
}
@-webkit-keyframes chColor /* Chrome */
{
from {background: red;}
to {background: yellow;}
}
div
{
animation: chColor 3s;
-moz-animation: chColor
3s; /* Firefox */
-webkit-animation: chColor
3s ; /* Chrome */
}
< /style >
</head>
<body>
< div >
Developer Studio Network
< /div >
</body>
</html>
|
|
|
مثال 1 : در مثال دوم ساختار دیگری را تعیین کرده ایم که پس
زمینه یک عنصر و موقعیت قرار گیرا آن را در یک سیکل تعیین شده در صفحه تغییر می دهد
. این تغییر یک افکت تصویری زیبا را ایجاد کرده است .در این ساختار کد لازم برای
سازگاری با انواع مرورگرها قرار داده شده است :
توجه شود در این مثال با قرار دادن مقدار نامحدود برای خاصیت iteration-count ، باعث
شده ایم این افکت به صورت نامحدود اجرا شود .
< html >;
< head >
< style >
@keyframes myfirst
{
0% {background: red; left:0px;
top:0px;}
25% {background: yellow; left:200px;
top:0px;}
50% {background: blue; left:200px;
top:200px;}
75% {background: green; left:0px;
top:200px;}
100% {background: red; left:0px;
top:0px;}
}
@-moz-keyframes myfirst /* Firefox */
{
0% {background: red; left:0px;
top:0px;}
25% {background: yellow; left:200px;
top:0px;}
50% {background: blue; left:200px;
top:200px;}
75% {background: green; left:0px;
top:200px;}
100% {background: red; left:0px;
top:0px;}
}
@-webkit-keyframes myfirst /* Safari and Chrome */
{
0% {background: red; left:0px;
top:0px;}
25% {background: yellow; left:200px;
top:0px;}
50% {background: blue; left:200px;
top:200px;}
75% {background: green; left:0px;
top:200px;}
100% {background: red; left:0px;
top:0px;}
}
div
{
width:100px;
height:100px;
background:red;
position:relative;
animation : myfirst
5s infinite;
-moz-animation : myfirst
5s infinite; /*Firefox*/
-webkit-animation :
myfirst 5s infinite; /*Chrome*/
}
< /style >
</head>
<body>
< div >
Developer Studio Network
< /div >
</body>
</html>
|
|
|
راجع این مطلب
سوال یا اشکالی دارید ؟! آن را در انجمن سایت مطرح نمایید ...
>>>>> ورود به انجمن تخصصی
نظر خودتان درباره این صفحه را با ما در میان بگذارید :