در مثال زیر ، می خواهیم تگ دایو که ای دی ان را mymove نام گذاری کرده ایم ، از (from) از مختصات بالا برابر صفر (top=0) به (to) مختصات بالا برابر 200 (top=200) منتقل شود
دستورات را برای تمام انواع مرورگرها می نویسیم

/*

 دستورات برای مرورگر اینترنت اکسپلورر هرچند هنوز از این ویژگی پشتیبانی نمی کند

*/

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

 

// دستورات برای مرورگر فایر فاکس

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


// دستورات برای مرورگر های وب کیت یعنی کروم و سفاری

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


// دستورات برای مرورگر اپرا

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

 مشاهده و اجرای برنامه کامل
 

 مرورگرهایی که از ویژگی keyframe پشتیبانی می کنند :

Internet Explorer Firefox Opera Google Chrome Safari

 هنوز دستور زیر در هیچ مرورگری پشتیبانی نمی شود :

@keyframes

 در مرورگر فایر فاکس دستور زیر شناخته می شود :

@-moz-keyframes

 در مرورگرهای وب کیت یعنی سفاری و کروم دستور زیر شناخته می شود :

 @-webkit-keyframes

در مرورگر اپرا دستور زیر شناخته میشود :

@-o-keyframes

 
 نحوه تعریف و استفاده از ویژگی keyframes

 با ویژگی keyframes شما می توانید انیمیشن بسازید

انیمیشن به این صورت ایجاد می شود که تغییرات را از حالت فعلی که ویژگیهای سی اس اس تگ مورد نظر ما دارد به تدریج به وضعیتی که می خواهیم می رساند

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

 0% یعنی زمان شروع انیمیشن

100% یعنی زمان خاتمه انیمیشن

 برای اینکه در انواع مرورگرها ، انیمیشنی که ساخته اید به خوبی کار کند ، حتما وضعیت ویژگیهای سی اس اس تگ مورد نظر را در زمان 0% و 100% مشخص نمائید

 نکته :

از ویژگیهای مختلفی که animation دارد برای کنترل اجرای ان استفاده نمائید

و همینطور فراموش نکنید که انیمیشن باید به یک سلکتور وابسته شود

 روش استفاده از ویژگی keyframes
 
@keyframes animationname {keyframes-selector {css-styles;}}
  •  animationname

مشخص کردن مقدار این پارامتر اجباری است

نامی است که ما برای انیمیشن در نطر می گیریم

  •  keyframes-selector

 حتما باید مقدار این پارامتر مشخص شود

مشخص می کند در کدام مرحله از اجرای انیمیشن چه اتفاقی بیافتد

مقادیری که می تواند این پارامتر بگیرد بصورت زیر است :

عددی از 0% تا 100 %

یا

from ( که همان 0% است)

to ( که همان 100% است )

 

نکته : در یک انیمیشن شما می توانید چندین زمان مشخص کنید

  •  css-styles

مشخص کردن مقدار این پارامتر اجباری است

 درون {} ویژگیهای سی اس اس و مقدار انها را در ان لحظه از انیمیشن که با پارامتر keyframes-selecto مشخص کردید ، بیا ن کنید

 

 مثال1 :

ویژگی keyframes را برای ایجاد انیمیشن زیر تنظیم نمائید :

انیمیشنی به نام mymove ایجاد کنید

که در زمان شروع ان ، یعنی 0% ، فاصله تگ مورد نظر از بالا برابر 0 پیکسل باشد

وقتی اجرای انیمیشن در 25 درصد زمان کل اجرای انیمیشن رسید ، فاصله تگ از بالای صفحه 200 پیکسل شود

وقتی اجرای انیمیشن در 50 درصد زمان کل اجرای انیمیشن رسید ، فاصله تگ از بالای صفحه 100 پیکسل شود

وقتی اجرای انیمیشن در 75 درصد زمان کل اجرای انیمیشن رسید ، فاصله تگ از بالای صفحه 200 پیکسل شود

وقتی اجرای انیمیشن در 100 درصد زمان کل اجرای انیمیشن رسید ، فاصله تگ از بالای صفحه 0 پیکسل شود

 این انیمیشن طوری طراحی شود ، که اگر در هر مرورگری صفحه وب ما اجرا شد ، انیمیشن کار کند

 

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

@-moz-keyframes mymove /* Firefox */
{
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;}
}

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

 مشاهده و اجرای برنامه کامل
 البته برنامه کامل این مثال کمی با انچه در اینجا نوشته ایم فرق دارد
 

 مثال 2

انیمیشنی با نام mymove به صورت زیر طراحی کنید

  • در زمان شروع انیمیشن یعنی زمان 0% :

فاصله تگ مورد نظر از بالای صفحه وب صفر باشد

رنگ زمینه تگ مورد نظر قرمز باشد

عرض تگ مورد نظر 100 پیکسل باشد

در زمان خاتمه انیمیشن یعنی زمان 100%:

فاصله تگ مورد نظر از بالای صفحه وب 200 پیکسل باشد

رنگ زمینه تگ مورد نظر زرد باشد

عرض تگ مورد نظر 300 پیکسل باشد

 دستورات را طوری بنویسید که انیمیشن در تمام مرورگرها (به جز اینترنت اکسپلورر) اجرا شود

 

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

@-moz-keyframes mymove /* Firefox */
{
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;}
}

@-o-keyframes mymove /* Opera */
{
0%   {top:0px; background:red; width:100px;}
100% {top:200px; background:yellow; width:300px;}
}

 
 مشاهده و اجرای برنامه کامل
 
 مثال 3:
 انیمیشنی با نام mymove ایجاد نمائید که در ان بتوان در چندین زمان مختلف چندین ویژگی سی اس اس تگ مورد نظر را تغییر دهیم
 دستورات را طوری بنویسید که انیمیشن در تمام مرورگرها (به جز اینترنت اکسپلورر) اجرا شود

 

 @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;}
}

@-moz-keyframes mymove /* Firefox */
{
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;}
}

@-o-keyframes mymove /* Opera */
{
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;}
}

 مشاهده و اجرای برنامه کامل