انیمیشن در css

 

استفاده از انیمیشن‌ در صفحات وب زیبایی خاص و منحصر به فردی ایجاد می کند و باعث می شود تا کاربران زیادی را مجذوب سایت خود کنید. با کمک تکنولوژی CSS به شما این اجازه را می‌دهد تا بدون حتی یک خط درگیرشدن با کدها و کتابخانه‌های پیچیده‌ی جاوا اسکریپت و تنها با استفاده از دستورات HTML و CSS، انیمیشن‌هایی جذابی را بسازید. با ایجاد انیمیشن‌ها می‌توانید بین کاربر و وبسایت خود، تعامل و بازخوردی تاثیرگذاری بوجود آورید.

ایجاد یک تجربه‌ عالی با تولید انیمشن های زیبا موجب می شود زیبایی و حرفه ای بودن وبسایت شما را تقویت کند. اگر به وبسایت های مختلف مشاهده کرده باشید استفاده از انیمیشن در سایت ها بسیار بیشتر شده است و با کمک ساخت انیمشن های جذاب css از یکنواختی و سادگی وبسایت جلوگیری کند. در ادامه این مقاله قصد داریم نحوه ایجاد انیمشن در css به شما آشنا کنیم؛ پس با ما همراه باشید.

انیمیشن در CSS چیست؟

با ایجاد انیمیشن در صفحات وب خود این امکان را به شما می دهد تا بتوانید یک المان را در طی مدت زمان مشخصی ویژگی های رفتاری و ظاهر خود را تغییر دهید. به طور کلی برای استفاده انیمیشن در css تنها کافیست با قرار دادن چندین کلیدواژه یک انیمشن زیبا را تولید کنید.

برای ساخت انیمیشن موردنظر خود در ابتدا باید دستور @Keyframes تعریف کنید و با کمک آن استایل های انیمیشن از جمله میزان تاخیر، تعداد دفعات تکرار و غیره مشخص کرد.

معرفی ویژگی های انیمیشن در css3

قبل از ساختن یک انیمیشن، در نظر داشته باشید که باید ویژگی هایی از جمله نام انیمیشن، مدت زمان، تعداد دفعات تکرار، منحنی سرعت و... مشخص کنید. تمام این ویژگی ها، به المانی که می خواهید انیمیشن داشته باشد اختصاص داده می‌شود. اختصاص دادن این ویژگی ها، مشابه تعیین خاصیت های یک transition می باشد که این ویژگی ها به شرح زیر است.

• animation-name
• animation-duration
• animation-delay
• animation-iteration-count
• animation-direction
• animation-timing-function
• animation-fill-mode
• animation

خاصیت انیمیشن به شما اجازه می دهد که یک المان را در یک محدوده زمانی مشخص از یک استایل به استایل دیگری تغییر کند. همان طور که اشاره کردیم برای استفاده از خاصیت انیمیشن در css، شما در ابتدا باید یک keyframes برای انیمیشن خود تعریف کنید.

1. معرفی @keyframes در ساخت انیمیشن

زمانی که استایل های CSS را در داخل دستور keyframes تعیین می کنید، انیمیشن در طی زمان مشخصی از حالت فعلی به حالت جدید تغییر پیدا می کند. دقت داشته باشید که برای کار کردن انیمیشن، باید به یک المان وصل کنید؛ تا انیمیشن به خوبی عمل کند. ساختار کلی آن به صورت زیر است:

@keyframes exampl }

  from {background-color: red;}

  to {background-color: yellow;}

در روش دیگر برای مشخص کردن انیمیشن می توان از دستور زیر استفاده کرد:

@keyframes example }

}  0%   background-color: red;}

  25%  {background-color: yellow;}

  50%  {background-color: blue;}

100% {background-color: green;}

 

2. معرفی ویژگی animation-name

اولین گام برای ساخت انیمیشن در CSS، مشخص کردن  نام اختصاصی برای انیمیشن می باشد. این اسن می‌تواند هر نام دلخواهی باشد. برای نمونه، اگه بخواهیم یک المان div رو انیمیشن کنیم، نحوه کدنویسی به صورت زیر خواهد بود:

 div { animation-name: myFirstAnimation; }

 

3. معرفی ویژگی animation-duration

ویژگی animation-duration در CSS3 از سه مقادیر زیر تعریف شده است:

• مقدار time
• مقدار initial
• مقدار inherit

مقدار time درون ویژگی animation-duration

این خاصیت با تعیین کردن یک مقدار عددی بر حسب واحد ثانیه و میلی ثانیه (برای مثال 2s یا ms2) جهت مشخص کردن مدت زمان چرخه اجرا یک انیمیشن مورد استفاده قرار می گیرد.

مقدار initial درون ویژگی animation-duration

با قرار دادن این مقداردهی animation-duration، در واقع مقدار پیش فرض که معادل صفر ثانیه است به مدت زمان چرخه برای یک تگ html اجرا می شود. در حقیقت این مقداردهی مدت زمانی برای اجرای چرخه در انیمیشن لحاظ نمی شود.

مقدار inherit درون ویژگی animation-duration

با قرار دادن این مقداردهی animation-duration، در حقیقت تگ html مربوطه ویژگی های انیمیشن را از والد پدری خود به ارث می برد.

 

 4. معرفی ویژگی animation-delay

این خاصیت به شما اجازه می‌دهد تا مشخص کنید در چه مدت زمانی انیمیشن شروع به اجرا شود. این ویژگی دارای مقدار مثبت مثل 2s تعیین می شود که انیمیشن با تاخیر 2 ثانیه شروع به اجرا می‌کند. اگر به animation-delay مقدار منفی بدهید انیمیشن را یکباره شروع می‌کند اما در ثانیه 2 وارد انیمیشن می‌شود. توجه داشته باشید که مقدار در واحد ثانیه یا میلی ثانیه مشخص می شود. سینتکس CSS این ویژگی به صورت زیر است:

animation-delay: 5s;

 

5. معرفی ویژگی animation-iteration-count

این ویژگی تعداد دفعات اجرا انیمیشن را تعیین می‌کند. مقادیر ممکن عبارتند از:

number: یک مقدار عددی می باشد که تعداد دفعات اجرای انیمیشن را تعیین می کند (حالت پیش فرض 1).

infinite: انیمیشن به صورت نامحدود تکرار می‌شود.

initial: تعداد دفعات اجرا را به مقدار پیش‌فرض تنظیم می‌کند.

inherit: استفاده از مقدار پدر یا والد به ارث می‌برد.

نحوه کدنویسی css به صورت زیر است:

 animation-iteration-count: 2;

 

6. معرفی ویژگی animation-timing-function

این خاصیت، منحنی سرعت یا سرعت انیمیشن در CSS را مشخص می‌کند. شما می‌توانید با استفاده از animation-timing-function زمان‌بندی انیمیشن را با گزینه‌های از پیش تعریف شده نظیر ease, linear, ease-in, ease-out, ease-in-out, initial, inherit انتخاب کنید. البته ساخت انیمشن های با زمانبندی پیشرفته‌تر و سفارشی با کمک cubic-bezier curve تولید کنید. حالت پیش‌فرض این خاصیت، مقدار ease می باشد که با سرعت کم شروع شده و سپس سرعت آن افزایش یافته و در نهایت نیز کاهش می‌یابد.

نحوه کدنویسی css به صورت زیر است:

 animation-timing-function: ease-in-out;

 

7. معرفی ویژگی animation-fill-mode

این خاصیت تعیین می‌کند که استایل‌های انیمیشن، هنگام قبل یا بعد از اجرا انیمیشن می توان مشاهده کرد یا خیر. ممکن است در ابتدا این ویژگی برای شما قابل درک نباشد، اما یک بار که آن را تمرین کنید، برایتان بسیار مفید خواهد بود. مقادیر پیش فرض تعیین شده animation-fill-mode عبارتند از:

• backwards: با مقداردهی این عنصر قبل از اجرا انیمیشن یا در طول تاخیر در انیمیشن، بر روی استایل‌های keyframe اولیه (0٪) تعریف می‌شود.
• Forward: پس از اجرا انیمیشن، استایل‌های تعریف شده در keyframe پایانی (100٪) توسط المان حفظ می‌شوند.
• both: این مقداردهی انیمیشن قوانین را برای هر دو مقدار backwards و Forward رعایت می‌کند و خاصیت های انیمیشن را قبل و بعد از اجرا گسترش می‌دهد.
• normal (پیش فرض): این مقدار هیچ استایلی بر روی عنصر چه قبل و چه بعد از آن ایجاد نمی‌کند.

نحوه کدنویسی css به صورت زیر است:

animation-fill-mode: forwards;

برای آموزش مقدماتی تا پیشرفته  html و css کلیک کنید