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

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

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

属性 کروم IE فایرفاکس سافاری اپرا
@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 {
  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 یہ خاصیت آنی سارنوں کو شروع کی جانے کی تاخیر کا عرصہ مقرر کرتی ہے.

ایک مثال میں آنی سارنوں کو شروع ہونے سے قبل 2 سیکنڈ کی تاخیر کا استعمال کیا گیا ہے:

实例

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

亲自试一试

منفی کا اعداد بھی اپنایا جاسکتا ہے. اگر منفی کا اعداد استعمال کیا گیا تو آنی سارنوں کو شروع کیا جائے گا جیسے وہ N سیکنڈ کا عرصہ پورا کیا ہوئے کی طرح.

ایک مثال میں آنی سارنوں کو 2 سیکنڈ کی تاخیر کے بعد شروع کیا جائے گا، جیسے وہ 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 انیمیشن کی رفتار منحنی کا تعین کرنا