آموزش کار با انیمیشن در CSS 3
انیمیشن در CSS3
animationهای CSS3 ، اجازه میدهند که اکثر عناصر HTML، بدون استفاده از جاوا اسکریپت و flash، انیمیشن داشته باشند.
♦ animationهای CSS3 چه هستند؟
انیمیشن اجازه میدهد که یک عنصر به تدریج از استایلی به استایل دیگری تغییر کند.
شما میتوانید هر چند بار که خواستید خواص CSS را تغییر دهید.
برای استفاده از انیمیشن CSS3، باید ابتدا چند keyframe را برای انیمیشن مشخص کنید. keyframe مشخص میکند که عنصر در زمان خاصی چه استایلی داشته باشد.
♦ پشتیبانی مرورگر از انیمیشن ها
در زیر لیست اولین ورژن های مرورگرهایی را که برای بار اول به طور کامل انیمیشن را پشتیبانی کرده اند، یادآوری کرده ایم:
► مرورگر اینترنت اکسپلورر : نسخه 10.0
► مرورگر Chrome : ورژن 4.0
► مرورگر firefox : نسخه 16.0
► مرورگر Opera : ورژن 15.05.07
► مرورگر Safari : نسخه 4.0
♦ قانون @Keyframes
وقتی که شما استایل های CSS را داخل قانون @keyframes مشخص می کنید، انیمیشن به تدریج در زمانی که مشخص شده از استایل فعلی به استایل جدید تغییر می یابد.
برای دریافت یک تصویر متحرک، باید انیمیشن را به عنصر مرتبط کنید.
در مثال زیر، انیمیشن “example” را به عنصر “div” متصل می کند. طبق خواص تعیین شده، انیمیشن 4 ثانیه به طول می انجامد و به تدریج، رنگ عنصر div از قرمز به زرد تغییر می یابد. وقتی زمان animation تمام شد، به رنگ اصلی تبدیل می شود.
@keyframes example {
from {background-color: red;}
to {background-color: yellow;}
}
/* The element to apply the animation to */
div {
width: 100px;
height: 100px;
background-color: red;
animation-name: example;
animation-duration: 4s;
}
توجه داشته باشید، در صورتی که خاصیت animation-duration (زمان انیمیشن) تعیین نشده باشد، انیمیشن تاثیری نخواهد داشت، چرا که مقدار پیش فرض این خاصیت 0 است.
در مثال بالا، زمان تعیین شده برای تغییر استایل با استفاده از کلمات کلیدی from و to مشخص شده است که نشان دهنده %0 (زمان شروع) و %100 (زمان پایان) می باشد.
این زمان را میتوان با استفاده از مقادیر درصدی نیز نشان داد. با استفاده از درصد نیز میتوانید هرچقدر تغییرات استایل را که خواستید، اضافه کنید.
مثال زیر، رنگ پس زمینه عنصر div را وقتی که انیمیشن %25 کامل، %50 کامل و دوباره وقتی انیمیشن %100 کامل شد، تغییر میدهد.
@keyframes example {
0% {background-color: red;}
25% {background-color: yellow;}
50% {background-color: blue;}
100% {background-color: green;}
}
/* The element to apply the animation to */
div {
width: 100px;
height: 100px;
background-color: red;
animation-name: example;
animation-duration: 4s;
}
مثال زیر دو خاصیت رنگ پس زمینه و موقعیت عنصر div را وقتی که انیمیشن %25 کامل، %50 کامل و دوباره وقتی انیمیشن %100 کامل شد، تغییر میدهد.
@keyframes example {
0% {background-color: red; left:0px; top:0px;}
25% {background-color: yellow; left:200px; top:0px;}
50% {background-color: blue; left:200px; top:200px;}
75% {background-color: green; left:0px; top:200px;}
100% {background-color: red; left:0px; top:0px;}
}
/* The element to apply the animation to */
div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
}
♦ تاخیر یک انیمیشن
خاصیت animation-delay زمان تاخیر شروع یک تصویر متحرک را مشخص می نماید:
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
animation-delay: 2s;
}
♦ تنظیم اجرای چندین بار یک انیمیشن
ویژگی animation-iteration-count در CSS3 مشخص میکند که یک انیمیشن چند بار پشت سر هم اجرا شود. اگر میخواهید تصویری برای همیشه متحک باشد، باید به این خاصیت مقدار " infinite" بدهید.
مثال زیر انیمیشن را سه بار قبل از توقف آن اجرا خواهد کرد:
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
animation-iteration-count: 3;
}
♦ اجرای انیمیشن در جهت معکوس یا دوره های متناوب
خاصیت animation-direction اجازه میدهد که انیمیشن در جهت معکوس اجرا شود. اگر به این خاصیت مقدار " alternate" بدهید، بصورت یک در میان، به سمت جلو و سپس در جهت معکوس حرکت خواهد کرد. مقدار"reverse" نیز تصویر را مرتبا در جهت معکوس متحرک می سازد.
♦ مشخص کردن منحنی سرعت انیمیشن
خاصیت animation-timing-function، منحنی سرعت انیمیشن را مشخص می کند. این خاصیت مقادیر زیر را می تواند داشته باشد:
► ease : یک تصویر متحرک را با حرکت آهسته شروع میکند، سپس سریع، و بعد از آن با آرامی پایان می یابد. (این مقدار، مقدار پیش فرض خاصیت است).
► linear : یک انیمیشن را با سرعت ثابت از شروع تا پایان مشخص میکند.
► ease-in : انیمیشنی با شروع آهسته مشخص میکند.
► ease-out : تصویری متحرک با پایانی آهسته را نمایش می دهد.
► ease-in-out : انیمیشنی با شروع و پایان آهسته.
► (cubic-bezier(n,n,n,n : اجازه می دهد خودتان مقادیر را در تابع cubic-bezier مشخص کنید.
مثال زیر برخی از منحنی سرعت های مختلف است که می تواند مورد استفاده قرار گیرد را نشان می دهد:
#div2 {animation-timing-function: ease;}
#div3 {animation-timing-function: ease-in;}
#div4 {animation-timing-function: ease-out;}
#div5 {animation-timing-function: ease-in-out;}
♦ خاصیت مختصرنویسی animation
در مثال زیر از شش خاصیت انیمیشن عناصر استفاده شده است :
animation-name: example;
animation-duration: 5s;
animation-timing-function: linear;
animation-delay: 2s;
animation-iteration-count: infinite;
animation-direction: alternate;
}
همان اثر انیمیشن بالا را میتوان با استفاده از خواص مختصرنویسی زیر داشت :
animation: example 5s linear 2s infinite alternate;
}
♦ ویژگیهای انیمیشن CSS3
در زیر لیست قوانین @keyframes و تمام خواص انیمیشن را می بینید:
► خاصیت @keyframes : کد انیمیشن را مشخص میکند.
► animation : یک ویژگی مختصر نویسی برای تنظیم تمام خواص انیمیشن ( به جز animation-play-state و animation-fill-mode)
► animation-delay : تاخیر شروع یک تصویر متحرک را مشخص می نماید.
► animation-direction : تعیین میکند که تصویر در جهت معکوس اجرا شود و یا در یک دوره متناوب.
► animation-duration : تعیین میکند که چند ثانیه و یا میلی ثانیه طول میکشد تا یک چرخه انیمیشن کامل شود.
► animation-fill-mode : استایل عنصر را وقتی که انیمیشن اجرا نمی شود، تعیین میکند (وقتی تمام میشود و یا د زمان تاخیر انیمیشن).
► animation-iteration-count : تعداد دفعات اجرای انیمیشن را مشخص میکند.
► animation-name : نام انیمیشن @keyframes را مشخص می نماید.
► animation-play-state : تعیین میکند که انیمیشن در حال اجراست یا متوقف شده است.
► animation-timing-function : منحنی سرعت انیمیشن را مشخص میکند.
.gif)
سلام.باریکلا .افرین .خسته نباشید .ممنون کارمونو راه انداختی .از این چیزا زیاد بزار. من قبلا فک میکردم واسه انیمیشن باید حتما از js استفاده کنیم ...
ممنون واقعا استفاده کردم از آموزش انیمیشن