این آموزش در تاریخ ۱۴۰۲/۰۶/۲۸ آپدیت شده است.
آموزش کار با انیمیشن ها یا Animations در CSS3
سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش کار با انیمیشن ها یا Animations در CSS3 با من همراه باشید.
Free-Learn
آنچه در این جلسه میخوانید :
- 1 کار با انیمیشن ها یا Animations در CSS3
- 2 آشنایی با قانون keyframes@ در CSS3
- 3 کار با ویژگی Animation-Name در CSS3
- 4 کار با ویژگی Animation-Duration در CSS3
- 5 کار با ویژگی Animation-Delay در CSS3
- 6 کار با ویژگی Animation-Iteration-Count در CSS3
- 7 کار با ویژگی Animation-Direction در CSS3
- 8 کار با ویژگی Animation-Timing-Function در CSS3
- 9 کار با ویژگی Animation-Fill-mode در CSS3
- 10 خلاصه نویسی ویژگی Animation
کار با انیمیشن ها یا Animations در CSS3
در جلسه قبلی ما با ویژگی Transition آشنا شدیم و یاد گرفتیم که با استفاده از این ویژگی میتوان به تگ های درون صفحه افکت انتقال داد، حال در این جلسه ( آموزش کار با انیمیشن ها یا Animations در CSS3 ) میخوایم با ویژگی Animation آشنا شویم.
Animation ویژگی است که با استفاده از آن میتوان تگ های داخل یک صفحه وب رو به حرکت درآورد ( یا به اصطلاح همون متحرک سازی تگ ها )
مثلا میتونیم مشخص کنیم که وقتی ماوس بروی یک تگ قرار گرفت اون تگ به نقطه ای دیگر از صفحه منتقل شود ، یا مثلا میتونیم مشخص کنیم یک تگ خودش خودکار بعد از مدت زمان مشخصی از یک نقطه به نقطه دیگری منتقل شود و..
در این جلسه میخوایم با ویژگی های زیر که مرتبط با انیمیشن ها هستند کار کنیم :
- @keyframes : یک چهارچوب یا قانون برای نحوه اجرای انیمیشن
- animation-name : نام انیمیشن برای اتصال به دستور کی فریم
- animation-duration : مدت زمان اجرای انیمیشن
- animation-delay : یک تاخیر برای شروع شدن انیمیشن
- animation-iteration-count : تعداد دفعات اجرای انیمیشن
- animation-direction : جهت اجرا شدن انیمیشن
- animation-timing-function : روش / تابع اجرای انیمیشن
- animation-fill-mode : جهت حفظ استایل یک عنصر در هنگام پایان یافتن انیمیشن
Free-Learn
آشنایی با قانون keyframes@ در CSS3
دستور keyframes@ میتونه یک قانون ( یا یک چهارچوب ) برای نحوه ی اجرا شدن انیمیشن ایجاد کنه، مثلا با استفاده از این قانون میتونیم بگیم یک عنصر در طول اجرای انیمیشن تا پایان اجرا، رنگ زمینش فلان رنگ باشد و دیگر ویژگی هایی که میتونیم روش اعمال کنیم.
نکته : باید نامی که برای keyframes مشخص میکنیم به عنوان مقدار برای ویژگی animation-name مشخصش کنیم، یعنی باید بهم وصل شن تا انیمیشن بتونه اجرا شه.
مثال شماره ۱ : مشخص کردن یک نام برای keyframes ، بعدش همون نام رو داخل ویژگی animation-name قرار میدیم برای اجرا شدن انیمیشن
|
1 2 3 4 5 6 7 |
div { animation-name: test; } @keyframes test { ... } |
Free-Learn
کار با ویژگی Animation-Name در CSS3
همونطور که از نام این ویژگی هم مشخصه ، با استفاده از آن میتوان یک نام را برای انیمیشن مشخص کرد، که این نام باید دقیقا همون نامی باشه که برای دستور / قانون keyframes@ مشخص کردیم.
مثال شماره ۱ : در مثال زیر رنگ عادی زمینه ی تگ قرمز هست، حال میخوایم با اجرا شدن انیمیشن رنگ زمینه ۶ ثانیه طول بکشه تا از رنگ قرمز به رنگ آبی تبدیل بشه.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<style> .MyBox{ animation-name: free-learn; animation-duration: 6s; } @keyframes free-learn{ from {background-color: red;} to {background-color: blue;} } </style> |
Free-Learn
کار با ویژگی Animation-Duration در CSS3
با استفاده از این ویژگی نیز میتونیم مدت زمانی را برای اجرای انیمیشن مان مشخص نماییم. ( اگه توجه کرده باشید تو مثال بالا از این ویژگی استفاده شده )
مقداری که این ویژگی میتونه بپذیره واحد زمان می باشد : ( هر ۱۰۰۰ میلی ثانیه ۱ ثانیه می باشد )
- s : برحسب ثانیه
- ms : برحسب میلی ثانیه
مثال شماره ۱ : استفاده از ms
|
1 |
animation-duration: 2000ms; |
مثال شماره ۲ : استفاده از s ( که تو مثال بالا هم ازش استفاده کردیم )
|
1 |
animation-duration: 6s; |
Free-Learn
کار با ویژگی Animation-Delay در CSS3
با استفاده از این ویژگی میتونیم مشخص کنیم که چه مدت زمان بگذره بعدش انیمیشن شروع بشه، یعنی مثلا میگیم ۳ ثانیه بگذره بعدش انیمیشن شروع بشه.
مقداری که این ویژگی میتونه بپذیره واحد زمان می باشد : ( هر ۱۰۰۰ میلی ثانیه ۱ ثانیه می باشد )
- s : برحسب ثانیه
- ms : برحسب میلی ثانیه
مثال : ۳ ثانیه طول میکشه تا انیمیشن اجرا بشه
|
1 2 3 |
.MyBox{ animation-delay: 3s; } |
Free-Learn
کار با ویژگی Animation-Iteration-Count در CSS3
در ادامه ی ( آموزش کار با انیمیشن ها یا Animations در CSS3 ) میخواهیم با ویژگی Animation-Iteration-Count آشنا شویم، با استفاده از این ویژگی میتوان تعداد دفعات اجرای انیمیشن را مشخص کرد، مثلا بگیم انیمیشن ما به تعداد ۳ بار تکرار شود.
این ویژگی ۲ مقدار زیر را میتواند بپذیرد :
- number : بصورت عددی
- infinite : نامحدود و تا همیشه
مثال شماره ۱ : اجرا با تعداد دفعات مشخص شده
|
1 2 3 |
.MyBox{ animation-iteration-count: 3; } |
مثال شماره ۲ : اجرای بی نهایت
|
1 2 3 |
.MyBox{ animation-iteration-count: infinite; } |
Free-Learn
کار با ویژگی Animation-Direction در CSS3
با استفاده از این ویژگی نیز میتوان جهت اجرای انیمیشن را مشخص کرد، مثلا اگه انیمیشن از سمت راست قرار هس اجرا بشه با استفاده از این ویژگی میتوان کاری کرد که برعکس اجرا شود.
- normal : گزینه پیش فرض
- reverse : جهت شروع انیمیشن را معکوس میکند
- alternate : از نقطه شروع بسمت نقطه پایان بصورت متناوب
- alternate-reverse : از نقطه پایان بسمت نقطه شروع بصورت متناوب
مثال شماره ۱ : در حالت معکوس یا reverse
|
1 2 3 |
.MyBox{ animation-direction: reverse; } |
مثال شماره ۲ : در حالت متناوب Alternate ( از نقطه شروع میره به پایان دوباره درجا بدون مکث برمیگرده )
|
1 2 3 |
.MyBox{ animation-direction: alternate; } |
Free-Learn
کار با ویژگی Animation-Timing-Function در CSS3
با استفاده از این ویژگی نیز میتوان یک منحنی / تابع زمانی ( برای نحوه اجرای انیمیشن ) ایجاد کرد.
- linear : از شروع تا پایان با سرعت یکسان
- ease-in : شروع با سرعت کم و یواش
- ease-out : پایان با سرعت کم و یواش
- ease-in-out : شروع و پایان با سرعت کم
- steps(int,start|end) : تکه تکه کردن سرعت اجرای انیمیشن
- cubic-bezier(0-1,0-1,0-1,0-1) : استفاده از مکعب بزیر یک مقدار از ۰ تا ۱
مثال شماره ۱ : از حالت linear
|
1 2 3 |
.MyBox { animation-timing-function:linear; } |
مثال شماره ۲ : از حالت ease-in-out
|
1 2 3 |
.MyBox { animation-timing-function: ease-in-out; } |
مثال شماره ۳ : از حالت steps(int,start|end)
|
1 2 3 |
.MyBox { animation-timing-function: steps(4,start); } |
مثال شماره ۴ : از حالت cubic-bezier ( 4 بخش داره و هر بخش یک مقدار از ۰٫۰ تا ۱ میگیره )
|
1 2 3 |
.MyBox { animation-timing-function: cubic-bezier(0.4, 1, 1, 0.1); } |
Free-Learn
کار با ویژگی Animation-Fill-mode در CSS3
خب در ادامه آموزش کار با انیمیشن ها یا Animations در CSS3 میخوام شمارو با ویژگی Animation-Fill-mode آشنا کنم، لطفا با من همراه باشید.
خب اگه توجه کرده باشید وقتی انیمیشن تموم میشه ، استایلش رو از دست میده ، مثلا اگه یه تگ در حالت عادی رنگ زمینش قرمز باشه و در حین اجرای انیمیشن رنگ زمینش آبی بشه، وقتی انیمیشن تموم شد دوباره رنگ زمینش میشه قرمز، یعنی برمیگرده به حالت اولش
حال با استفاده از ویژگی Animation-Fill-mode میتونیم استایل تگ رو بعد از پایان انیمیشن همچنان حفظ کنیم.
- forwards : حفظ آخرین قانون / استایل از کی فریم
- backwards : حفظ اولین قانون / استایل از کی فریم
- both : هر۲حالت
مثال شماره ۱ : حالت Backwards ( استایل اولین دستور داخل keyframes رو حفظ میکنه )
|
1 2 3 |
.MyBox{ animation-fill-mode: backwards; } |
مثال شماره ۲ : حالت Forwards ( استایل آخرین دستور داخل keyframes رو حفظ میکنه )
|
1 2 3 |
.MyBox{ animation-fill-mode: forwards; } |
مثال شماره ۳ : حالت both ( در هر ۲حالت )
|
1 2 3 |
.MyBox{ animation-fill-mode: both; } |
Free-Learn
خلاصه نویسی ویژگی Animation
خب دوستان به پایان آموزش کار با انیمیشن ها یا Animations در CSS3 رسیدیم، در آخر میخوام شمارو با نحوه خلاصه نویسی این ویژگی آشنا کنم.
تمامی ویژگی هایی که از اول این آموزش تا الان یاد گرفتید رو میخوایم با استفاده از حالت خلاصه نویسی ، تو یه خط و با استفاده از ۱ ویژگی آنها را ایجاد و اجرا نماییم.
شکل کلی برای خلاصه نویسی ویژگیی Animation :
|
1 |
animation: name|duration|timing-function|delay|iteration-count|direction|fill-mode|play-state; |
مثال شماره ۱ : استفاده از تمامی مقادیر به جز Play-State ( آموزش ویژگی Play-State )
|
1 2 3 |
.MyBox{ animation: free-learn 2s cubic-bezier(0.4, 1, 1, 0.1) 1s 3 alternate forwards; } |
