CSS امکان انیمیشن المان‌های HTML را بدون نیاز به استفاده از JavaScript فراهم می‌کند! در این بخش به بررسی نحوه استفاده از CSS برای ایجاد انیمیشن می‌پردازیم.
ویژگی‌های مربوط به انیمیشن‌ها
در این فصل با ویژگی‌های زیر در CSS آشنا خواهید شد:
- @keyframes: تعریف نقاط کلیدی برای تغییرات استایل
- animation-name: نام انیمیشن
- animation-duration: مدت زمان اجرای انیمیشن
- animation-delay: تاخیر در شروع انیمیشن
- animation-iteration-count: تعداد دفعات اجرای انیمیشن
- animation-direction: جهت اجرای انیمیشن
- animation-timing-function: نحوه تغییر سرعت انیمیشن
- animation-fill-mode: مشخص کردن حالت‌های انیمیشن قبل و بعد از اجرا
- animation: ویژگی کلی انیمیشن که به صورت خلاصه از همه ویژگی‌ها استفاده می‌کند.
پشتیبانی مرورگرها از انیمیشن‌های CSS
در جدول زیر نسخه‌های اولیه مرورگرها که از این ویژگی‌ها پشتیبانی می‌کنند، آورده شده است.
| ویژگی | Chrome | Firefox | Safari | Edge | Opera |
|---|---|---|---|---|---|
| @keyframes | 43.0 | 10.0 | 16.0 | 9.0 | 30.0 |
| animation-name | 43.0 | 10.0 | 16.0 | 9.0 | 30.0 |
| animation-duration | 43.0 | 10.0 | 16.0 | 9.0 | 30.0 |
| animation-delay | 43.0 | 10.0 | 16.0 | 9.0 | 30.0 |
| animation-iteration-count | 43.0 | 10.0 | 16.0 | 9.0 | 30.0 |
| animation-direction | 43.0 | 10.0 | 16.0 | 9.0 | 30.0 |
| animation-timing-function | 43.0 | 10.0 | 16.0 | 9.0 | 30.0 |
| animation-fill-mode | 43.0 | 10.0 | 16.0 | 9.0 | 30.0 |
| animation | 43.0 | 10.0 | 16.0 | 9.0 | 30.0 |
انیمیشن‌های CSS چیست؟
انیمیشن‌ها به المان‌ها امکان می‌دهند که به صورت تدریجی از یک استایل به استایل دیگری تغییر کنند. شما می‌توانید به هر تعداد ویژگی CSS که می‌خواهید در انیمیشن تغییر دهید.
قانون @keyframes
رای استفاده از انیمیشن CSS، ابتدا باید نقاط کلیدی را با استفاده از قانون @keyframes تعریف کنید. این نقاط کلیدی مشخص می‌کنند که در چه زمانی چه استایلی به المان اعمال شود.
مثال:
/* کد انیمیشن */
@keyframes example {
from {background-color: red;}
to {background-color: yellow;}
}
/* المانی که انیمیشن به آن اعمال می‌شود */
div {
width: 100px;
height: 100px;
background-color: red;
animation-name: example;
animation-duration: 4s;
}در این مثال، انیمیشن پس‌زمینه عنصر <div> را به مدت 4 ثانیه از رنگ قرمز به زرد تغییر می‌دهد.
تغییرات چندگانه با درصد
علاوه بر استفاده از “from” و “to”، می‌توانید از درصد استفاده کنید تا استایل‌های بیشتری را در طول انیمیشن اعمال کنید.
مثال:
@keyframes example {
0% {background-color: red;}
25% {background-color: yellow;}
50% {background-color: blue;}
100% {background-color: green;}
}
div {
width: 100px;
height: 100px;
background-color: red;
animation-name: example;
animation-duration: 4s;
}تأخیر در شروع انیمیشن
با استفاده از ویژگی animation-delay، می‌توانید تاخیری برای شروع انیمیشن تعیین کنید.
مثال:
div {
width: 100px;
height: 100px;
background-color: red;
animation-name: example;
animation-duration: 4s;
animation-delay: 2s;
}مقادیر منفی
می‌توانید از مقادیر منفی نیز استفاده کنید. در این صورت، انیمیشن به گونه‌ای اجرا می‌شود که انگار از قبل شروع شده است.
مثال:
div {
width: 100px;
height: 100px;
background-color: red;
animation-name: example;
animation-duration: 4s;
animation-delay: -2s;
}تعیین تعداد دفعات اجرای انیمیشن
با استفاده از ویژگی animation-iteration-count، می‌توانید تعداد دفعات اجرای انیمیشن را مشخص کنید.
مثال:
div {
width: 100px;
height: 100px;
background-color: red;
animation-name: example;
animation-duration: 4s;
animation-iteration-count: 3;
}برای اجرای بی‌نهایت انیمیشن:
div {
width: 100px;
height: 100px;
background-color: red;
animation-name: example;
animation-duration: 4s;
animation-iteration-count: infinite;
}تغییر جهت انیمیشن
ویژگی animation-direction جهت اجرای انیمیشن را مشخص می‌کند.
مثال برای اجرای انیمیشن در جهت معکوس:
div {
width: 100px;
height: 100px;
background-color: red;
animation-name: example;
animation-duration: 4s;
animation-direction: reverse;
}مثال برای اجرای انیمیشن به صورت متناوب (رفت و برگشتی):
div {
width: 100px;
height: 100px;
background-color: red;
animation-name: example;
animation-duration: 4s;
animation-direction: alternate;
}مشخص کردن منحنی سرعت انیمیشن
ویژگی animation-timing-function نحوه تغییر سرعت انیمیشن را تعیین می‌کند. مقادیر مختلف شامل ease، linear، ease-in، ease-out و ease-in-out می‌باشند.
مثال:
#div1 {animation-timing-function: linear;}
#div2 {animation-timing-function: ease;}
#div3 {animation-timing-function: ease-in;}
#div4 {animation-timing-function: ease-out;}
#div5 {animation-timing-function: ease-in-out;}مشخص کردن حالت‌های انیمیشن با fill-mode
ویژگی animation-fill-mode تعیین می‌کند که یک عنصر قبل یا بعد از اجرای انیمیشن چه حالتی داشته باشد.
مثال:
div {
width: 100px;
height: 100px;
background-color: red;
animation-name: example;
animation-duration: 3s;
animation-fill-mode: forwards;
}استفاده از ویژگی خلاصه‌شده انیمیشن
می‌توانید تمامی ویژگی‌های انیمیشن را به صورت خلاصه در یک خط استفاده کنید.
مثال:
div {
animation: example 5s linear 2s infinite alternate;
}نتیجه‌گیری
ویژگی‌های انیمیشن در CSS امکان ایجاد جلوه‌های بصری جذاب و تغییرات تدریجی استایل‌ها را به راحتی فراهم می‌کنند. این ویژگی‌ها را می‌توان به صورت دلخواه تنظیم و با استفاده از @keyframes سفارشی کرد.
برای ارسال نظر لطفا ابتدا وارد حساب کاربری خود شوید. صفحه ورود و ثبت نام