ایجاد انیمشین با استفاده از CSS

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

 

ایجاد انیمشین با استفاده از CSS ایجاد انیمشین با استفاده از css ایجاد انیمشین با استفاده از CSS Crear animaciones

ایجاد انیمشین با استفاده از CSS


قاعده کلی کد به صورت زیر است (animname نام انیمیشنی است که مسازید) :

 

@keyframes

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

و css

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

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

شما میتوانید به تعداد زیادی استایل را در زمان های مختلف ایجاد کنید. در کد بالا من فقط در سه زمان کاری را انجام میدهم. در مقابل هر قسمت باید کد سی اس اس مورد نظر رو بنویسیم.

برای مثال شما میخواهید رنگ زمینه ابتدا آبی، سپس قرمز و در پایان سبز باشد باید کد را به صورت زیر بنویسیم:

این کد نیز مانند بقیه کد های CSS3 باید برای مرورگر ها دیگر هم با نوشته شود (moz و webkit) که در پایان کامل کد را در یک مثال مینویسم.
برای فراخوانی این انیمیشن باید کد زیر رو به کلاس یا آی دی اضافه کنید (این کد نیز باید برای webkit نوشته شود) :

حال همان مثال بالا را به صورت کامل:

آموزش CSS آموزش طراحی وب

دیدگاه خود را بیان کنید