خانه / مقالات اموزشی / css / keyframes و انیمیشن css
آموزش CSS
آموزش CSS

keyframes و انیمیشن css

آموزش CSS (فصل یازدهم – جلسه سوم) : آشنایی با جلوه های ویژه ی CSS3

انیمشین

در این جلسه از اموزش css در رابطه با ساخت انیمشن در css3 صحبت خواهیم کرد. در css3 ما به راحتی می توانیم اجزاء صفحه را حرکت دهیم، آنها را بچرخانیم، کوچک و بزرگ کنیم و در کل هر انیمشنی را بدون استفاده از هیچ زبان دیگری بسازیم.

@keyframes

برای ساخت انیمشین در css3 ما نیاز داریم که بفهمیم keyframes چیست و چطور عمل می کند؟
در حقیقت در داخل keyframes ما مجموعه کدهایی را که برای ساخت انیمشین نیاز است می نویسیم و در آن حالت اولیه و حالتی که باید یک جزء از صفحه به آن تبدیل شوید را می نویسیم.
کدهای زیر را در نظر بگیرید :

و کد css

 

حال میخواهیم که رنگ جعبه را با استفاده از @keyframes از سیاه به قرمز تبدیل کنیم.

کد css

 

بسیار خب، حال ما انیمیشن را ساختیم، anim1 نام انیمشین ما است، from شروع انیمیشن و to پایان انیمیشن را مشخص می کند، که جعبه از سیاه به قرمز تغییر رنگ دهد.
اما هنوز انیمیشن غیر فعال است و کاری انجام نمی دهد. برای ینکه انیمیشن را به جعبه اختصاص دهیم باید از خصوصیت animation استفاده کنیم و به آن حداقل دو مقدار دهیم :
مقدار اول : نام انیمشین که همان anim1 است
مقدار دوم : زمان اجرای انیمشین که بر حسب ثانیه (s) یا میلی ثانیه (ms) می تواند باشد.

کد css :

 

نتیجه در مرورگر

شیوه زمان بندی انیمشین

در زمان تعریف keyframes ما میتوانیم از from برای تعریف شرایط شروع انیمیشن و از to برای شرایط پایان انیمیشن استفاده کنیم، وقتی از from و to استفاده می کنیم وابسته به مدت زمان تعیین شده، مرورگر به صورت خودکار زمان را طوری تنظیم میکند که از حالت from تا به حالت to در مدت زمان تعریف شده اجرا شود.
بجای from و to ما میتوانیم از % نیز استفاده کنیم. مقدار ۰% شروع انیمیشن و مقدار ۱۰۰% پایان انیمشین را تعیین میکند.
در هنگام استفاده از % ما می توانیم مراحل انمیشین را به ۱۰۰ قسمت تقسیم کنیم، و در هر قسمت کدهای مورد نظرمان را قرار دهیم
مثال :

 

 

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

همچنین ببینید

آموزش برنامه نویسی جاوا

نحوه نام گذاری متغییر های جاوا

مطلب جدیدی که در این آموزش قرار است فرا بگیریم نحوه صحیح نامگذاری متغیر ها ...

پاسخ دهید

علی طاهری آموزشگاه طراحی سایت نوین آی تی 021-88283800 info(@)novin-it.net