انیمیشن‌ها (CSS Animations)
انیمیشن‌های CSS به شما این امکان را می‌دهند که تغییرات و حرکات نرم و داینامیک ایجاد کنید، بدون اینکه نیاز به استفاده از جاوااسکریپت باشد. می‌توانید از انیمیشن‌ها برای تغییر ظاهر یک عنصر در طول زمان استفاده کنید، مانند تغییر رنگ‌ها، جابجایی عناصر، چرخاندن، مقیاس‌بندی و یا حتی افکت‌های پیچیده‌تر.
1. تعریف انیمیشن با استفاده از @keyframes
قانون @keyframes مراحل مختلف انیمیشن را تعریف می‌کند. در هر مرحله (مثلاً ۰٪، ۵۰٪، ۱۰۰٪)، می‌توانید ویژگی‌های مختلفی برای عنصر مشخص کنید.
مثال:
@keyframes slide {
0% {
transform: translateX(0);
opacity: 1;
}
100% {
transform: translateX(300px);
opacity: 0;
}
}
2. اعمال انیمیشن به یک عنصر
بعد از تعریف keyframes، می‌توانید انیمیشن را به یک عنصر با استفاده از ویژگی animation اعمال کنید.
مثال:
.element {
animation: slide 3s ease-in-out infinite;
}
ویژگی‌های انیمیشن:
animation-name: نام انیمیشن keyframes.animation-duration: مدت زمان اجرای انیمیشن (مثلاً2s).animation-timing-function: منحنی سرعت انیمیشن (مثلاًlinear،ease،ease-in-out).animation-delay: تاخیر قبل از شروع انیمیشن (مثلاً1s).animation-iteration-count: تعداد دفعاتی که انیمیشن تکرار می‌شود (مثلاًinfiniteبرای تکرار نامحدود یا3برای سه بار).animation-direction: مشخص می‌کند که آیا انیمیشن در چرخه‌های متناوب معکوس اجرا شود یا نه (alternate،normalو غیره).
مثال انیمیشن کامل:
<!DOCTYPE html>
<html lang=“fa”>
<head>
<meta charset=“UTF-8”>
<meta name=“viewport” content=“width=device-width, initial-scale=1.0”>
<title>مثال انیمیشن CSS</title>
<style>
@keyframes slide {
0% {
transform: translateX(0);
opacity: 1;
}
100% {
transform: translateX(300px);
opacity: 0;
}
}
.element {
width: 100px;
height: 100px;
background-color: red;
animation: slide 3s ease-in-out infinite;
}
</style>
</head>
<body>
<div class=“element”></div>
</body>
</html>
در این مثال، یک مربع قرمز به سمت راست حرکت کرده و در طی ۳ ثانیه محو می‌شود و انیمیشن به صورت نامحدود تکرار می‌شود.
اگر به مثال‌های پیشرفته‌تر یا توضیحات بیشتری نیاز دارید، خوشحال می‌شوم کمک کنم!
دیدگاهتان را بنویسید