قاعده keyframes@

10 / 10
از 1 کاربر

در طراحی سایت با استفاده از css3، قاعده keyframes@ مشخص کننده کد انیمیشن است. انیمیشن به تدریج از یک مجموعه css به مجموعه دیگر در حال تغییر است. در طول انیمیشن شما می توانید مجموعه سبک های css را چندین بار تغییر دهید. زمان تغییر سبک را با درصد مشخص کنید و یا از عبارات "from" و "to" ("از " و "به") استفاده کنید. برای مثال 0% و 100%، که 0% ابتدای انیمیشن و 100% انتهای انیمیشن است.

نکته: برای پشتیبانی بهتر از مرورگرها، شما همیشه باید هر دو 0% و 100% را برای انیمیشن تعریف کنید.

توجه: از ویژگی های انیمیشن ها در css3 برای کنترل ظاهر انیمیشن، و همچنین به منظور اتصال انیمیشن ها به سلکتورها، استفاده کنید.

این ویژگی در طراحی سایت با css3 به شیوه زیر نوشته می شود:

@keyframes animationname {keyframes-selector {css-styles;}}

در جدول زیر مقادیر ویژگی را به همراه توضیحات آن برای شما کاربران عزیز توضیح داده ایم.

 

مقادیر

 

توضیحات

 

 

Animationname

 

 

الزامی است و معرف نام انیمیشن است.

 

 

 

 

keyframes-selector

 

الزامی است و بیانگر درصد مدت زمان نمایش انیمیشن است. این ویژگی در طراحی سایت قادر است مقادیر زیر را به خود بگیرد.

0-100%

from (مانند 0%)

to (مشابه 100%)

نکته : شما می توانید چندین keyframes-selector در یک انیمیشن داشته باشید.

 

css-styles (سبک های css)

 

 

الزامی است.

مثال:

/* Chrome, Safari, Opera */
@-webkit-keyframes mymove {
0% {top: 0px;}
25% {top: 200px;}
50% {top: 100px;}
75% {top: 200px;}
100% {top: 0px;}
}

/* Standard syntax */
@keyframes mymove {
0% {top: 0px;}
25% {top: 200px;}
50% {top: 100px;}
75% {top: 200px;}
100% {top: 0px;}
}

ارسال نظر و نظرات ثبت شده