انیمیشن در css
در css3 ویژگی به نام animation اضافه شده است که شما با استفاده از آن قادر به ساخت تصاویر متحرک و انیمیشن های ساده برای المان های مختلف خواهید بود. این ویژگی css می تواند جایگزین خوبی برای تصاویر انیمیشن ، فلش و جی کوئری باشد . در زیر ویژگی های مورد استفاده در انیمیشن css را می توانید مشاهده کنید.
آنچه در این مقاله می خوانید ...
ویژگی های انیمیشن در ccs3
| ویژگی | توضیحات |
|---|---|
| @keyframes | مشخص کردن نوع حرکت انیمیشن |
| animation | تنظیم تمام ویژگی های انیمیشن به صورت یکجا |
| animation-delay | یک تاخیر برای شروع یک انیمیشن مشخص می کند |
| animation-direction | تغییر جهت انیمیشن در هر دور را مشخص می کند |
| animation-duration | تنظیم مدت زمانی که یک انیمیشن برای تکمیل یک چرخه باید انجام دهد |
| animation-fill-mode | یک سبک برای قبل و بعد از انیمیشن تنظیم می کند |
| animation-iteration-count | تعداد دفعات تکرار یک انیمیشن را تعیین می کند |
| animation-name | نام یک انیمیشن را مشخص می کند |
| animation-play-state | مشخص می کند که یک انیمیشن اجرا یا متوقف شود |
| animation-timing-function | منحنی سرعت انیمیشن را مشخص می کند |
نحوه ساختن انیمیشن
برای ساختن انیمیشن css ابتدا باید با قانون keyframes@ آشنا شوید.
قانون keyframes@ در css3 :
در واقع شما در داخل keyframes@ ها مشخص می کنید که در یک زمان معین چه تغییراتی در style یک المان ایجاد شود.
به طور کلی keyframes@ ها به این دو صورت نوشته می شوند :
- @keyframes animatedName{
- from{width:10%;backgroun:red;}
- to{width:80%;backgroun:green;}
- }
- @keyframes animated{
- 0%{width:10%;background:red;}
- 25%{width:30%;background:green;}
- 50%{width:50%;background:blue;}
- 75%{width:60%;background:yellow;}
- 100%{width:80%;background:green;}
- }
توجه animatedName نام انتخابی شما برای انیمیشن می باشد.
در روش اول انیمیشن در دو مرحله اجرا می می گردد، که (from) شروع و (to) پایان انیمیشن را مشخص می کنند. در روش دوم یک انیمیشن را می توان در چند مرحله اجرا نمود به ترتیب از 0% تا 100% آن. همچنین در دو روش داخل { } تغییرات مورد نظر در هر مرحله را می نویسیم.
پشتیبانی animation در مرورگرها :
keyframes@ در مرورگر chrome و microsoft edge با پیشوند -webkit- پشتیبانی می شود. و در مرورگر های opera و mozilafirefox به ترتیب با پیشوند های -o- و -moz- قابل پشتیبانی است.
یعنی به صورت زیر :
- @-webkit-keyframes
- @-o-keyframes
- @-moz-keyframes
استفاده از انیمیشن css در عناصر html :
بعد از این که keyframes@ آماده شد ، نوبت به استفاده از آن در المان مورد نظر می رسد.
برای این کار به صورت زیر عمل می کنیم :
- div{
- animation: name duration timing-function delay iteration-count direction fill-mode play-state;
- }
همانطور که در فوق مشخص می باشد برای animation می توانیم چندین مقدار را به صورت یکجا در نظر بگیریم که در زیر مهمترین آن ها را معرفی می کنیم.
animation-name که همان نامی است که برای keyframes@ انتخاب کرده ایم.
animation-duration که مدت زمان اجرای انیمیشن را بر حسب ثانیه مشخص می کند.
animation-timing-function که سرعت اجرای انیمیشن را تعیین می کند. و دارای چهار حالت پیش فرض (linear) (ease) (ease-in) (ease-in-out) است.
animation-delay که برابر با تاخیر در اجرای انیمیشن بعد از باز شدن صفحه و بر حسب ثانیه می باشد.
animation-iteration-count که تعداد دفعات اجرای انیمیشن را مشخص می کند. اگر این مقدار برابر (infinite) باشد، انیمیشن همواره تکرار می شود.
animation-direction که نحوه حرکت انیمیشن را مشخص می کند. و دارای سه حالت (alternate-reverse) (reverse) (alternate) است.
توجه مقدار animation-play-state به صورت پیش فرض برابر running است. و اگر آن را رو paused تنظیم کنید انیمیشن متوقف می شود.
توجه تنظیم animation-name و animation-duration الزامی بود و بدون نوشتن آن ها انیمیشن اجرا نمی شود.
1398/04/09
2928 بار