سبد (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 قانون [email protected] را پشتیبانی می کنند.

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

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


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

برای ایجاد انیمیشن در CSS3، ابتدا باید قانون [email protected] را یاد بگیرید.

[email protected] جایی است که در آن انیمیشن ایجاد می شود. داخل [email protected] یک Style مشخص می کنیم و انیمیشن بتدریج از Style جاری به Style جدید تغییر می کند.

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

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

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

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

توجه: پس از اینکه، انیمیشن را در قانون [email protected] تعریف کردید، با استفاده از خاصیت 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)

دیدگاه‌ها  

0 # محمد 22 1396-02-19 23:47
سلام ببخشید ی سوال اگه بخوایم یک keyframe بعد از اینکه کاربر موس رو روی یک بکس آورد اجرا بشه و وقتی موس خارج شد به حالت اول برگرده باید چی کار کنیم ؟؟؟
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
0 # امیر پهلوان صادق 1396-02-20 09:31 پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
تمامی محصولات و خدمات این وبسایت، حسب مورد دارای مجوزهای لازم از مراجع مربوطه می‌باشند و فعالیت‌های این سایت تابع قوانین و مقررات جمهوری اسلامی ایران است.
logo-samandehi مجوز نشر دیجیتال از وزرات فرهنگ و ارشاد اسلامی پرداخت آنلاین -  بانک ملت معرفی بیاموز در شبکه سه پرداخت آنلاین - بانک اقتصاد نوین پرداخت آنلاین - بانک سامان