انیمیشن‌ها و انتقالات در CSS
انیمیشن‌ها و انتقالات (Transitions & Animations) در CSS به ما کمک می‌کنن که ظاهر سایت رو جذاب‌تر و داینامیک‌تر کنیم.
انتقالات (CSS Transitions)
انتقالات به ما این امکان رو می‌دن که تغییرات CSS (مثل تغییر رنگ، اندازه، موقعیت و غیره) به‌صورت نرم و انیمیشنی انجام بشه.
ساختار کلی transition
selector {
transition: property duration timing-function delay;
}
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;
}
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;
}
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 {
/* حالت نهایی */
}
}
from {
/* حالت ابتدایی */
}
to {
/* حالت نهایی */
}
}
یا
@keyframes animation-name {
0% { /* شروع */ }
50% { /* وسط */ }
100% { /* پایان */ }
}
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;
}
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;
}
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-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); }
}
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); }
}
