الگوریتم اول

لطفا صبر کنید...

انیمیشن‌ها و انتقالات در CSS

انیمیشن‌ها و انتقالات (Transitions & Animations) در CSS به ما کمک می‌کنن که ظاهر سایت رو جذاب‌تر و داینامیک‌تر کنیم. 

انتقالات (CSS Transitions)

انتقالات به ما این امکان رو می‌دن که تغییرات CSS (مثل تغییر رنگ، اندازه، موقعیت و غیره) به‌صورت نرم و انیمیشنی انجام بشه.

ساختار کلی transition

selector {
  transition: property duration timing-function delay;
}

پارامترها:

  • property: ویژگی‌ای که می‌خوایم تغییر کنه (مثلاً background-color).
  • duration: مدت زمان تغییر (مثلاً 0.5s).
  • timing-function: حالت تغییر (مثلاً ease-in-out).
  • delay: میزان تأخیر شروع (مثلاً 0.2s).

مثال تغییر رنگ دکمه با hover

button {
  background-color: blue;
  color: white;
  padding: 10px 20px;
  border: none;
  transition: background-color 0.5s ease-in-out;
}

button:hover {
  background-color: red;
}

مثال تغییر اندازه جعبه

.box {
  width: 100px;
  height: 100px;
  background-color: orange;
  transition: width 0.3s ease-in-out;
}

.box:hover {
  width: 200px;
}

انیمیشن‌ها در CSS (CSS Animations)

برخلاف transition که فقط بین دو حالت تغییر می‌کنه، انیمیشن‌ها به ما امکان می‌دن که چندین فریم مختلف داشته باشیم.

ساختار کلی keyframes@

@keyframes animation-name {
  from {
    /* حالت ابتدایی */
  }
  to {
    /* حالت نهایی */
  }
}

یا

@keyframes animation-name {
  0% { /* شروع */ }
  50% { /* وسط */ }
  100% { /* پایان */ }
}

مثال: تغییر رنگ جعبه به‌صورت تدریجی

@keyframes changeColor {
  0% {
    background-color: red;
  }
  50% {
    background-color: yellow;
  }
  100% {
    background-color: green;
  }
}

.box {
  width: 100px;
  height: 100px;
  animation: changeColor 3s infinite;
}

🔹 3s: مدت زمان هر چرخه
🔹 infinite: تکرار بی‌نهایت

مثال: حرکت دادن یک عنصر

@keyframes moveRight {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(200px);
  }
}

.box {
  width: 100px;
  height: 100px;
  background-color: blue;
  animation: moveRight 2s ease-in-out infinite alternate;
}

translateX(200px): جعبه رو ۲۰۰ پیکسل به راست حرکت می‌ده
alternate: رفت و برگشت انجام می‌ده

ویژگی‌های animation

animation-name: moveRight; /* نام انیمیشن */
animation-duration: 2s; /* مدت زمان */
animation-timing-function: ease-in-out; /* نوع حرکت */
animation-delay: 1s; /* تأخیر شروع */
animation-iteration-count: infinite; /* تعداد تکرار */
animation-direction: alternate; /* رفت و برگشت */

یا به‌صورت کوتاه‌تر:

animation: moveRight 2s ease-in-out 1s infinite alternate;

ترکیب انیمیشن و ترنزیشن

می‌تونیم transition و animation رو باهم ترکیب کنیم تا افکت‌های جذاب‌تری بسازیم.

مثلاً یه دکمه که وقتی کلیک کنیم، یه انیمیشن اجرا بشه:

button {
  background-color: green;
  transition: background-color 0.3s;
}

button:hover {
  background-color: yellow;
}

button:active {
  animation: shake 0.5s;
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  50% { transform: translateX(5px); }
  75% { transform: translateX(-5px); }
}