٪۴۰ تخفیف تابستانه شروع شد! بزرگترین حراج سال ما

به ما بپیوندید

آموزش انیمیشن های 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 پشتیبانی…

محمد یوسفی

13 جولای 2021

انیمیشن های 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

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

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


انیمیشن های CSS چیست؟

یک انیمیشن اجازه می دهد تا یک عنصر به تدریج از یک سبک به سبک دیگر تغییر کند.

می توانید هر تعداد ویژگی CSS که می خواهید ، هر چند بار که بخواهید تغییر دهید.

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

فریم های کلیدی این عنصر را نگه می دارد که عنصر در زمان های خاص از چه سبک هایی برخوردار خواهد بود.


قانونkeyframes

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

برای به کار انداختن یک انیمیشن ، باید انیمیشن را به یک عنصر متصل کنید.

مثال زیر انیمیشن “مثال” را به عنصر <div> متصل می کند. انیمیشن به مدت 4 ثانیه ادامه خواهد داشت و به تدریج رنگ پس زمینه عنصر <div> را از “قرمز” به “زرد” تغییر می دهد:

مثال

/* The animation code */
@keyframes example {
  from {background-color: red;}
  to {background-color: yellow;}
}

/* The element to apply the animation to */
div {
  width: 100px;
  height: 100px;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
}

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

در مثال بالا مشخص کرده ایم که با استفاده از کلمات کلیدی “از” و “به” (که 0٪ (شروع) و 100٪ (کامل)) سبک تغییر می کند.

همچنین می توان از درصد استفاده کرد. با استفاده از درصد ، می توانید هر تعداد سبک تغییر دهید که دوست دارید.

مثال زیر پس زمینه رنگ را از عنصر <div> تغییر می دهد وقتی انیمیشن 25٪ کامل شود ، 50٪ کامل باشد و دوباره 100٪ کامل شود.

مثال

/* The animation code */
@keyframes example {
  0%   {background-color: red;}
  25%  {background-color: yellow;}
  50%  {background-color: blue;}
  100% {background-color: green;}
}

/* The element to apply the animation to */
div {
  width: 100px;
  height: 100px;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
}

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

مثال

/* The animation code */
@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;}
}

/* The element to apply the animation to */
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;
}

مثال زیر برای ادامه دادن انیمیشن برای همیشه از مقدار “بی نهایت” استفاده می کند:

مثال

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

انیمیشن را در جهت معکوس یا چرخه های جایگزین اجرا کنید

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) – به شما اجازه می دهد مقادیر خود را در یک تابع bezier-cubic تعریف کنید

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

مثال

#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 – این عنصر مقادیر سبکی را که توسط آخرین فریم کلیدی تنظیم شده است حفظ خواهد کرد (بستگی به انیمیشن-جهت و انیمیشن-تکرار-تعداد دارد)
  • backwards – این عنصر مقادیر سبک را که توسط اولین فریم کلیدی تنظیم شده است بدست می آورد (بستگی به جهت انیمیشن دارد) و این را در دوره تأخیر انیمیشن حفظ کنید
  • 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;
}

منبع

مطالب مرتبط

0 0 رای ها
امتیازدهی به مقاله
اشتراک در
اطلاع از
guest
0 نظرات
بازخورد (Feedback) های اینلاین
مشاهده همه دیدگاه ها