سبد (0)

قانون @keyframes

مثال (قانون @keyframes)

عنصر <div> بتدریج 200 پیکسل به سمت پایین حرکت می کند:

@keyframes mymove
{
from {top:0px;}
to {top:200px;}
}

@-webkit-keyframes mymove /* Safari and Chrome */
{
from {top:0px;}
to {top:200px;}
}
خودتان امتحان کنید »

در انتهای این بیاموز، مثال های بیشتری را خواهید دید

پشتیبانی مرورگرها

Internet Explorer Firefox Opera Google Chrome Safari

مرورگرهای Internet Explorer 10, Firefox, Opera قانون keyframes@ را پشتیبانی می کنند.

مرورگرهای Chrome و Safari به پیشوند -webkit- نیاز دارند.

توجه: مرورگر Internet Explorer 9 و نسخه های قبلی آن، این امکان را پشتیبانی نمی کند.

تعریف و کاربرد

برای ایجاد انیمیشن در CSS3، ابتدا باید قانون keyframes@ را یاد بگیرید.

keyframes@ جایی است که در آن انیمیشن ایجاد می شود. داخل keyframes@ یک Style مشخص می کنیم و انیمیشن بتدریج از Style جاری به Style جدید تغییر می کند.

در طول اجرای انیمیشن می توانید چندین بار Style را تغییر دهید.

تغییرات را می توانید به صورت درصد یا با کلمه های کلیدی from و to بیان کنید.

0% ابتدای انیمیشن و 100% انتهای آن است.

برای پشتیبانی بهتر مرورگرها، همیشه 0% و 100% را مشخص نمایید.

توجه: پس از اینکه، انیمیشن را در قانون keyframes@ تعریف کردید، با استفاده از خاصیت animation آنرا به عنصر مورد نظرتان متصل کنید.

نحوه استفاده

@keyframes animationname {keyframes-selector {css-styles;}}
مقدارتوضیحات
animationname الزامی است. نام انیمیشن را مشخص می کند.
keyframes-selector الزامی است. مشخص می کند در چه زمانی از اجرای انیمیشن، Style اعمال شود.
مقادیر مجاز:

0-100%
from (0%)
to (100%)

توجه: در یک انیمیشن می توانید چندین keyframes-selectors داشته باشید.
css-styles الزامی است. می تواند شامل یک یا چند خصوصیت CSS باشد.
مثالs

مثال - خودتان امتحان کنید

مثال (قانون @keyframes)

مشخص کردن چندین keyframes-selector در یک انیمیشن:

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

@-webkit-keyframes mymove /* Safari and Chrome */
{
0%   {top:0px;}
25%  {top:200px;}
50%  {top:100px;}
75%  {top:200px;}
100% {top:0px;}
}
خودتان امتحان کنید »

مثال (قانون @keyframes)

تغییر چند Style به صورت همزمان:

@keyframes mymove
{
0%   {top:0px; background:red; width:100px;}
100% {top:200px; background:yellow; width:300px;}
}

@-webkit-keyframes mymove /* Safari and Chrome */
{
0%   {top:0px; background:red; width:100px;}
100% {top:200px; background:yellow; width:300px;}
}
خودتان امتحان کنید »

مثال (قانون @keyframes)

چندین keyframes-selector و Style مختلف در یک انیمیشن:

@keyframes mymove
{
0%   {top:0px; left:0px; background:red;}
25%  {top:0px; left:100px; background:blue;}
50%  {top:100px; left:100px; background:yellow;}
75%  {top:100px; left:0px; background:green;}
100% {top:0px; left:0px; background:red;}
}

@-webkit-keyframes mymove /* Safari and Chrome */
{
0%   {top:0px; left:0px; background:red;}
25%  {top:0px; left:100px; background:blue;}
50%  {top:100px; left:100px; background:yellow;}
75%  {top:100px; left:0px; background:green;}
100% {top:0px; left:0px; background:red;}
}
خودتان امتحان کنید »

بیاموزهای مرتبط

CSS3 Animation (بیاموز CSS3)

نوشته شده توسط امیر پهلوان صادق
بازدید: 12040

در میان شش هزار مطلب آموزشی منتشر شده در بیاموز، جستجو نمایید ...

تمامی محصولات و خدمات این وبسایت، حسب مورد دارای مجوزهای لازم از مراجع مربوطه می‌باشند و فعالیت‌های این سایت تابع قوانین و مقررات جمهوری اسلامی ایران است.
logo-samandehi مجوز نشر دیجیتال از وزرات فرهنگ و ارشاد اسلامی پرداخت آنلاین - بانک ملت معرفی بیاموز در شبکه سه