با CSS می‌تونی به سایتت حرکت بدی؛ از تغییر نرم با transition (مثل بزرگ شدن دکمه با هاور) تا انیمیشن پیچیده با @keyframes (مثل چرخیدن یه مربع). تو این مقاله یاد گرفتی با transition: transform 0.3s تغییرات ساده بسازی و با @keyframes مراحل انیمیشن رو خودت تعریف کنی. یه دکمه پرشی هم ساختیم که با کلیک حرکت می‌کنه. دست به کد بزن و با چند خط CSS، سایتت رو زنده کن!

 

اگه با CSS آشنا شدی و می‌خوای سایتت رو زنده‌تر کنی، انیمیشن‌ها یه راه عالی‌ان! با CSS می‌تونی بدون نیاز به برنامه‌نویسی پیچیده، حرکت، تغییر رنگ یا حتی محو شدن به عناصرت بدی. تو این مقاله قراره از صفر یاد بگیری چطور با CSS انیمیشن ساده بسازی، ابزارهاش رو بشناسی و دست به کد بزنی تا خودت امتحان کنی. آماده‌ای؟ بریم سراغش!

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

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

  1. ترنزیشن (Transition): برای تغییرات ساده و کوتاه.
  2. انیمیشن (Animation): برای حرکت‌های پیچیده‌تر با چند مرحله.

هر دو روش با کدهای ساده کار می‌کنن و نیازی به جاوااسکریپت ندارن.

چرا انیمیشن یاد بگیری؟

  • جذابیت: سایتت رو از حالت خشک درمیاره.
  • تجربه کاربری: توجه کاربر رو جلب می‌کنه و راهنمایش می‌کنه.
  • سادگی: با چند خط CSS می‌تونی نتیجه ببینی.

شروع با ترنزیشن (Transition)

ترنزیشن برای تغییرات نرم و ساده‌ست، مثل تغییر رنگ یا اندازه وقتی کاربر کاری می‌کنه (مثلاً کلیک یا هاور).

یه مثال ساده

بیایم یه دکمه بسازیم که با هاور بزرگ‌تر بشه.

HTML:
<!DOCTYPE html>
<html>
<head>
    <title>تست انیمیشن</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <button class="btn">هاور کن</button>
</body>
</html>
CSS (فایل styles.css):
.btn {
    padding: 10px 20px;
    background-color: #3498db;
    color: white;
    border: none;
    transition: transform 0.3s ease;
}

.btn:hover {
    transform: scale(1.2); /* 20% بزرگ‌تر می‌شه */
}

فایل رو تو مرورگر باز کن و ماوس رو ببر رو دکمه. می‌بینی که به نرمی بزرگ می‌شه!

ترنزیشن چطور کار می‌کنه؟
  • transition: transform 0.3s ease;
    • transform: چیزی که تغییر می‌کنه (اینجا اندازه).
    • 0.3s: مدت زمان (۰.۳ ثانیه).
    • ease: نوع حرکت (نرم شروع و تموم می‌شه).

می‌تونی چیزای دیگه رو هم تغییر بدی:

 

transition: background-color 0.5s, width 0.2s;

انیمیشن کامل با @keyframes

اگه بخوای حرکت پیچیده‌تر بسازی (مثلاً یه چرخش یا پرش)، از @keyframes استفاده می‌کنی. این ابزار بهت اجازه می‌ده مراحل انیمیشن رو خودت تعریف کنی.

یه مثال: مربع چرخان

بیایم یه مربع بسازیم که بچرخه.

HTML:
<!DOCTYPE html>
<html>
<head>
    <title>مربع چرخان</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="square"></div>
</body>
</html>
CSS:

 

.square {
    width: 100px;
    height: 100px;
    background-color: #e74c3c;
    animation: spin 2s infinite;
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

این مربع هر ۲ ثانیه یه دور کامل می‌چرخه و چون infinite گذاشتیم، هیچ‌وقت متوقف نمی‌شه.

@keyframes چطور کار می‌کنه؟
  • @keyframes spin: اسم انیمیشن رو تعریف می‌کنه (اینجا spin).
  • from و to: نقطه شروع و پایان (۰ تا ۳۶۰ درجه).
  • animation: spin 2s infinite:
    • spin: اسم انیمیشن.
    • 2s: مدت زمان یه دور.
    • infinite: تکرار بی‌نهایت.

می‌تونی درصد هم بذاری:

@keyframes bounce {
    0% { transform: translateY(0); }
    50% { transform: translateY(-20px); }
    100% { transform: translateY(0); }
}

ویژگی‌های انیمیشن

برای کنترل بیشتر، اینا رو به animation اضافه کن:

  • animation-duration: مدت زمان (مثل 2s).
  • animation-iteration-count: تعداد تکرار (مثل 3 یا infinite).
  • animation-timing-function: نوع حرکت (مثل ease, linear).
  • animation-delay: تاخیر شروع (مثل 1s).

مثال:

animation: bounce 1.5s 3 ease 0.5s;

یه پروژه عملی: دکمه پرشی

بیایم یه دکمه بسازیم که با کلیک بپره.

HTML:
<!DOCTYPE html>
<html>
<head>
    <title>دکمه پرشی</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <button class="jump-btn">کلیک کن</button>
</body>
</html>
CSS:

 

.jump-btn {
    padding: 15px 30px;
    background-color: #9b59b6;
    color: white;
    border: none;
    font-size: 16px;
    cursor: pointer;
}

.jump-btn:active {
    animation: jump 0.4s ease;
}

@keyframes jump {
    0% { transform: translateY(0); }
    50% { transform: translateY(-15px); }
    100% { transform: translateY(0); }
}

کلیک کن رو دکمه؛ می‌پره بالا و برمی‌گرده!

ترفندهای انیمیشن

  1. ترکیب کن: چند ویژگی رو با هم تغییر بده:
animation: move 2s infinite;
@keyframes move {
    0% { transform: translateX(0); background-color: red; }
    100% { transform: translateX(50px); background-color: blue; }
}
  1. نرمش کن: از ease-in-out یا cubic-bezier برای حرکت طبیعی‌تر استفاده کن.
  2. تست زنده: تو DevTools انیمیشن رو تغییر بده و نتیجه رو ببین.

مشکلات رایج و راه‌حل‌ها

  • انیمیشن کار نمی‌کنه: چک کن اسم @keyframes با animation یکی باشه.
  • حرکت تند و تیزه: زمان رو بیشتر کن (مثلاً 0.5s به 1s) یا ease اضافه کن.
  • عنصر غیبش می‌زنه: مطمئن شو transform درست نوشته شده (مثلاً rotate نه rotation).

ابزارهای کمکی

  • Cubic Bezier: از سایت cubic-bezier.com برای تنظیم حرکت استفاده کن.
  • Animate.css: یه کتابخونه آماده که انیمیشن‌های ساده داره.

قدم بعدی چیه؟

حالا که انیمیشن ساده رو یاد گرفتی:

  • با جاوااسکریپت انیمیشن‌ها رو تعاملی‌تر کن.
  • انیمیشن‌های پیچیده‌تر (مثل مسیرهای منحنی) رو تست کن.
  • تو پروژه‌های واقعی ازشون استفاده کن.

حرف آخر

انیمیشن با CSS مثل اضافه کردن یه نفس تازه به سایتته. با ترنزیشن و @keyframes می‌تونی حرکت‌های ساده و قشنگ بسازی و کاربرات رو سر ذوق بیاری. دست به کد بزن، این مثال‌ها رو امتحان کن و اگه سوالی داشتی، تو کامنت‌های "دست به کد" بپرس. تو مقاله‌های بعدی، بیشتر وارد جزئیات و پروژه‌های باحال‌تر می‌شیم!