آنی‌سازی‌های CSS

آنی‌سازی‌های CSS

CSS می‌تواند انیمیشن‌های HTML عناصر را بدون استفاده از JavaScript یا Flash ایجاد کند!

CSS

در این فصل، شما چیزهایی مانند زیر را یاد خواهید گرفت:

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

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

اعداد در جدول نشان‌دهنده نسخه اولین مرورگر هستند که از این ویژگی پشتیبانی می‌کند.

ویژگی Chrome IE Firefox Safari 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 را تغییر دهید.

برای استفاده از انیمیشن CSS، ابتدا باید چندین کادر کلیدی برای انیمیشن تعیین کنید.

کادرهای کلیدی شامل استایل‌هایی هستند که عنصر در زمان مشخصی دارد.

@keyframes قوانین

اگر در @keyframes در قوانین تعیین شده است که استایل‌های CSS در زمان مشخصی به تدریج از استایل فعلی به استایل جدید تغییر می‌کنند.

برای اینکه انیمیشن فعال شود، باید آن را به یک عنصر پیوند دهید.

مثال زیر "example" انیمیشن را به عنصر <div> پیوند می‌زند. انیمیشن 4 ثانیه طول می‌کشد و رنگ پس‌زمینه عناصر <div> را از "red" به "yellow" تغییر می‌دهد:

مثال

/* کد انیمیشن */
@keyframes example {
  from {background-color: red;}
  to {background-color: yellow;}
}
/* انیمیشن را به این عنصر اعمال کنید */
div {
  width: 100px;
  height: 100px;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
}

آزمایش کنید

توجه داشته باشید:animation-duration ویژگی تعریف می‌کند که چقدر زمان طول می‌کشد تا انیمیشن تکمیل شود. اگر تعیین نشده باشد، animation-duration اگر این ویژگی تعریف نشده باشد، انیمیشن رخ نمی‌دهد، زیرا مقدار پیش‌فرض 0s (0 ثانیه) است.

در مثال بالا، با استفاده از کلمات کلیدی "from" و "to" (که به ترتیب 0% (شروع) و 100% (پایان) را نشان می‌دهند)، ما زمان تغییر استایل را تنظیم کرده‌ایم.

شما همچنین می‌توانید از مقادیر درصدی استفاده کنید. با استفاده از درصد، می‌توانید هر تعداد تغییرات استایل مورد نیاز خود را اضافه کنید.

مثال زیر در 25%، 50% و 100% کامل شدن انیمیشن تغییر رنگ پس‌زمینه عناصر <div> را تغییر می‌دهد:

مثال

/* کد انیمیشن */
@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;
}

آزمایش کنید

مثال زیر در 25%，50% و 100% از انیمیشن، رنگ پس‌زمینه و موقعیت عناصر <div> را تغییر می‌دهد:

مثال

/* کد انیمیشن */
@keyframes example {
  0%   {background-color:red; left:0px; top:0px;}
  25%  {background-color:yellow; left:200px; top:0px;}
  50%  {background-color:blue; left:200px; top:200px;}
  75%  {background-color:green; left:0px; top:200px;}
  100% {background-color:red; left:0px; top:0px;}
}
/* عناصری که انیمیشن به آن‌ها اعمال می‌شود */
div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
}

آزمایش کنید

تأخیر انیمیشن

animation-delay این ویژگی مشخص می‌کند که انیمیشن باید با تأخیر چقدر زمانی شروع به اجرا کند.

مثال زیر انیمیشن را با تأخیر دو ثانیه قبل از شروع اجرا می‌کند:

مثال

div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
  animation-delay: 2s;
}

آزمایش کنید

مقدار منفی نیز مجاز است. اگر از مقدار منفی استفاده شود، انیمیشن به گونه‌ای شروع به پخش می‌کند که انگار N ثانیه از انیمیشن گذشته است.

در مثال زیر، انیمیشن به گونه‌ای شروع به پخش می‌کند که انگار دو ثانیه از انیمیشن گذشته است:

مثال

div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
  animation-delay: -2s;
}

آزمایش کنید

تنظیم تعداد اجرای انیمیشن

animation-iteration-count این ویژگی مشخص می‌کند که انیمیشن باید چند بار اجرا شود.

مثال زیر انیمیشن را قبل از توقف، سه بار اجرا می‌کند:

مثال

div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
  animation-iteration-count: 3;
}

آزمایش کنید

مثال زیر از مقدار "infinite" برای ادامه انیمیشن تا ابد استفاده می‌کند:

مثال

div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
  animation-iteration-count: infinite;
}

آزمایش کنید

انیمیشن‌های معکوس یا متناوب

animation-direction این ویژگی مشخص می‌کند که انیمیشن باید به سمت جلو، به سمت عقب یا به صورت متناوب اجرا شود.

animation-direction این خصوصیت از مقادیر زیر را می‌پذیرد:

  • normal - انیمیشن به صورت معمول پخش می‌شود (به سمت جلو). مقدار پیش‌فرض
  • reverse - انیمیشن به سمت معکوس (عقب) پخش می‌شود
  • alternate - انیمیشن ابتدا به سمت جلو و سپس به سمت عقب پخش می‌شود
  • alternate-reverse - انیمیشن ابتدا به سمت عقب و سپس به سمت جلو پخش می‌شود

در این مثال، انیمیشن به سمت معکوس (عقب) اجرا می‌شود:

مثال

div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
  animation-direction: reverse;
}

آزمایش کنید

مثال زیر از مقدار "alternate" برای اجرای ابتدا به سمت جلو و سپس به سمت عقب استفاده می‌کند:

مثال

div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
  animation-iteration-count: 2;
  animation-direction: alternate;
}

آزمایش کنید

مثال زیر از مقدار "alternate-reverse" برای اجرای ابتدا به سمت عقب و سپس به سمت جلو استفاده می‌کند:

مثال

div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
  animation-iteration-count: 2;
  animation-direction: alternate-reverse;
}

آزمایش کنید

منحنی سرعت انیمیشن را مشخص می‌کند

animation-timing-function این خصوصیت منحنی سرعت انیمیشن را مشخص می‌کند.

animation-timing-function این خصوصیت از مقادیر زیر را می‌پذیرد:

  • ease - انیمیشنی که از کندتر شروع می‌کند، سپس شتاب می‌گیرد و سپس به آرامی پایان می‌یابد (پیش‌فرض)
  • linear - انیمیشنی که سرعت یکسان از شروع تا پایان دارد را مشخص کنید
  • ease-in - انیمیشنی که شروع کندتر است را مشخص کنید
  • ease-out - انیمیشنی که پایان کندتر است را مشخص کنید
  • ease-in-out - انیمیشنی که شروع و پایان آن کندتر است را مشخص کنید
  • cubic-bezier(n,n,n,n) - مقادیر خود را در تابع بی塞尔 سه‌گانه تعریف کنید

در اینجا مثال‌هایی از برخی از منحنی‌های سرعت‌دهی‌ای که می‌توانید از آنها استفاده کنید آورده شده است:

مثال

#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;}

آزمایش کنید

مدل پرکننده انیمیشن را مشخص می‌کند

انیمیشن‌های CSS در مرحله قبل از اجرای اولین فریم کلیدی یا بعد از اجرای آخرین فریم کلیدی بر روی عناصر تأثیر نمی‌گذارند.animation-fill-mode این خصوصیت می‌تواند این رفتار را پوشش دهد.

در حالی که انیمیشن در حال اجرا نیست (قبل از شروع، بعد از پایان یا هر دو)،animation-fill-mode این خصوصیت استایل‌های عنصر هدف را تعیین می‌کند.

خصوصیت animation-fill-mode از مقادیر زیر را می‌پذیرد:

  • none - مقدار پیش‌فرض. انیمیشن در مرحله قبل از اجرا یا بعد از اجرا به هیچ عنوان استایل‌های عناصر را اعمال نمی‌کند.
  • forwards - عناصر استایل‌های تعیین شده در آخرین فریم کلیدی را حفظ خواهند کرد (بسته به animation-direction و animation-iteration-count).
  • backwards - عناصر استایل‌های تعیین شده در اولین فریم کلیدی (بسته به animation-direction) را دریافت خواهند کرد و این مقدار را در طول دوره تأخیر انیمیشن حفظ خواهند کرد.
  • both - انیمیشن همزمان از قوانین پیشرفت و بازگشت پیروی می‌کند، بنابراین属性 انیمیشن در دو جهت گسترش می‌یابد.

مثال زیر به شما اجازه می‌دهد تا عناصر <div> را در انتهای انیمیشن با استفاده از مقادیر استایل از آخرین فریم کلیدی حفظ کنید:

مثال

div {
  width: 100px;
  height: 100px;
  background: red;
  position: relative;
  animation-name: example;
  animation-duration: 3s;
  animation-fill-mode: forwards;
}

آزمایش کنید

در مثال زیر، عناصر <div> در زمان تاخیر انیمیشن (قبل از شروع انیمیشن) به استایل اولین کلیدفریم تبدیل می‌شوند:

مثال

div {
  width: 100px;
  height: 100px;
  background: red;
  position: relative;
  animation-name: example;
  animation-duration: 3s;
  animation-delay: 2s;
  animation-fill-mode: backwards;
}

آزمایش کنید

در مثال زیر، عناصر <div> قبل از شروع انیمیشن به استایل اولین کلیدفریم تبدیل می‌شوند و در پایان انیمیشن به استایل آخرین کلیدفریم باقی می‌مانند:

مثال

div {
  width: 100px;
  height: 100px;
  background: red;
  position: relative;
  animation-name: example;
  animation-duration: 3s;
  animation-delay: 2s;
  animation-fill-mode: both;
}

آزمایش کنید

ویژگی‌های خلاصه شده انیمیشن

در مثال زیر از شش ویژگی انیمیشن استفاده شده است:

مثال

div {
  animation-name: example;
  animation-duration: 5s;
  animation-timing-function: linear;
  animation-delay: 2s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

آزمایش کنید

استفاده از خلاصه‌سازی animation ویژگی‌ها نیز می‌توانند انیمیشن مشابه مثال بالا را ایجاد کنند:

مثال

div {
  animation: example 5s linear 2s infinite alternate;
}

آزمایش کنید

ویژگی‌های انیمیشن CSS

در جدول زیر، قوانین @keyframes و تمامی ویژگی‌های انیمیشن CSS لیست شده‌اند:

ویژگی وصف
@keyframes تعریف حالت انیمیشن.
animation تنظیم属性 خلاصه شده برای تمامی属性 انیمیشن.
animation-delay تعریف تاخیر شروع انیمیشن.
animation-direction تعریف اینکه انیمیشن به سمت جلو، به سمت عقب یا به صورت متناوب پخش شود.
animation-duration تعریف زمانی که انیمیشن برای یک دوره کامل باید زمان بگذرد.
animation-fill-mode تعریف استایل عناصر در زمانی که انیمیشن در حال پخش نیست (قبل از شروع، بعد از پایان، یا هر دو).
animation-iteration-count تعریف تعداد دفعات پخش انیمیشن.
animation-name تعریف نام @keyframes برای انیمیشن.
animation-play-state تعیین می‌کند که انیمیشن باید اجرا شود یا متوقف شود.
animation-timing-function مقدار سرعت انیمیشن را تعیین می‌کند.