ترنسفورم، ترنزیشن و انیمیشن

transition — انتقال نرم

.btn { transition: all 0.3s ease; }
.btn:hover { background: #22d3ee; transform: scale(1.05); }

ساختار: transition: <خاصیت> <مدت> <شتاب>;

transform — تغییر شکل

transform: scale(1.2);        /* بزرگ‌نمایی */
transform: rotate(45deg);     /* چرخش */
transform: translateX(20px);  /* جابه‌جایی */
transform: skew(10deg);

ترکیب: transform: scale(1.1) rotate(5deg); transform سه‌بعدی هم داریم: rotateY, perspective.

animation — انیمیشن کامل

@keyframes float {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-15px); }
}
.logo { animation: float 3s ease-in-out infinite; }

کارایی و احترام

برای روانی، روی transform و opacity تکیه کن (نه width/top). و:

@media (prefers-reduced-motion: reduce) {
    * { animation: none !important; transition: none !important; }
}

در پلی‌گراند، دکمه و توپِ متحرک را ببین و تغییر بده.