درس نهم: انیمیشن‌ها و جادوی حرکت در CSS

✨ ۱. انتقال‌های نرم (Transitions)

ویژگی transition اجازه می‌دهد تغییرات (مثلاً تغییر رنگ هنگام نگه داشتن موس روی دکمه) به صورت نرم و در یک بازه زمانی مشخص اتفاق بیفتد.

.button {
    background-color: blue;
    transition: background-color 0.5s ease; /* تغییر در نیم ثانیه */
}

.button:hover {
    background-color: red;
}

🎬 ۲. انیمیشن‌ها و Keyframes

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

/* تعریف حرکت */
@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.1); }
    100% { transform: scale(1); }
}

/* اعمال به عنصر */
.heart-icon {
    animation: pulse 2s infinite; /* تکرار ابدی */
}

یک مربع بسازید و کدی بنویسید که وقتی موس روی آن قرار می‌گیرد (Hover)، با استفاده از transition، به آرامی ۳۶۰ درجه بچرخد.