CSS انیمیشن

CSS انیمیشن

CSS، HTML عناصر کا انیمیشن کرسکتا ہے، جس میں جاوا اسکریپت یا فلاش کا استعمال نہیں کیا جاتا،!

CSS

اس باب میں، آپ کسی بھی سائٹل سیکشن کا تعلم کرسکتے ہیں:

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

انیمیشن کا براؤزر کا مدد دینا

جداول میں دیئے گئے شماریات، اس کی ابتدائی براؤزر ورژن کو کیا ہوا ہے جس میں اس کی پورا مدد دی جاتی ہے،

属性 کروم آئی ای فائر فاکس سافری آپریا
@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;
}

亲自试一试

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

实例

/* کد انیمیشن */
@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 آنیماشن کی رفتار منحنی کو طے کرنا