انیمیشنهای CSS یکی از قدرتمندترین ابزارها برای افزودن حرکت و جذابیت بصری به صفحات وب هستند، بدون نیاز به جاوااسکریپت یا کتابخانههای خارجی. با استفاده از انیمیشنهای CSS میتوانید عناصر HTML را به طور روان تغییر دهید، مانند تغییر رنگ، اندازه، موقعیت، شفافیت و حتی تحولات پیچیدهتر.
روش اصلی ایجاد انیمیشن در CSS با استفاده از ویژگی @keyframes و animation است. ابتدا با @keyframes یک انیمیشن را تعریف میکنید و مراحل مختلف آن را مشخص میکنید (مثلاً از ۰٪ تا ۱۰۰٪). سپس این انیمیشن را به یک المان با ویژگی animation اعمال میکنید. برای مثال، میتوانید یک المان را به آرامی محو کنید، بچرخانید یا از یک سمت صفحه به سمت دیگر حرکت دهید. این روش بسیار کارآمد است چون توسط مرورگر بهینهسازی میشود و معمولاً عملکرد بهتری نسبت به انیمیشنهای جاوااسکریپت دارد.
انیمیشن FadeIn
انیمیشن fadeIn برای ظاهر کردن آیتم بصورت آرام و جذاب