آنی‌سازی 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 در قوانین مشخص شده است که استایل‌ها در چه زمانی از استایل فعلی به استایل جدید تغییر می‌کنند.

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

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

مثال

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

آزمایش کنید

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

در مثال بالا، با استفاده از کلمات کلیدی "از" و "به" (که به ترتیب 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 این属性 مشخص می‌کند که انیمیشن باید چقدر تأخیر کند تا شروع شود.

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

مثال

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

آزمایش کنید

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

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

مثال

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

آزمایش کنید

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

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

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

مثال

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 تعیین سرعت منحنی انیمیشن.