انیمیشن در css

سلام به همه! 👋

اخیراً در زمینه انیمیشن‌های CSS تحقیق و یادگیری داشتم و دوست دارم آنچه را که آموخته‌ام با شما به اشتراک بگذارم. انیمیشن‌ها می‌توانند به طرز چشمگیری تعامل کاربر با وبسایت را بهبود بخشند و تجربه کاربری را لذت‌بخش‌تر کنند. در ادامه به مفاهیم کلیدی و پیاده‌سازی آن‌ها می‌پردازم:

📚 مقدمه‌ای بر انیمیشن‌های CSS

انیمیشن‌های CSS از طریق ویژگی @keyframes تعریف می‌شوند که می‌تواند تغییرات پیچیده و چند مرحله‌ای را روی عناصر HTML اعمال کند. به عنوان مثال، انیمیشنی که یک عنصر را به سمت چپ حرکت می‌دهد:

@keyframes slideleft { from { transform: translateX(100%); } to { transform: translateX(0); } }

⚙️ تنظیمات انیمیشن

برای کنترل دقیق‌تر انیمیشن‌ها، می‌توان از ویژگی‌های مختلفی استفاده کرد. یکی از مهم‌ترین ویژگی‌ها، animation-timing-function است که می‌توان با استفاده از cubic-bezier سرعت و شتاب حرکت را به دقت تنظیم کرد:

animation-timing-function: cubic-bezier(0.74,-0.54, 0.25, 1.56);

🔄 چرخه انیمیشن

ویژگی animation-iteration-count تعداد تکرار انیمیشن را مشخص می‌کند. برای مثال:

animation-iteration-count: 1; // انیمیشن فقط یک بار اجرا می‌شود

🖱️ تاثیرات Hover

با استفاده از ویژگی :hover می‌توان انیمیشن‌ها را برای تعاملات کاربر تعریف کرد. مثلاً تغییر رنگ پس‌زمینه وقتی که ماوس روی یک عنصر قرار می‌گیرد:

#box:hover { animation-name: colorChange; animation-duration: 2s; animation-iteration-count: 3; } @keyframes colorChange { 0% { background-color: red; } 100% { background-color: blue; } }

🎨 ترکیب انیمیشن‌ها

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

#box {

animation: slideright 2s linear 1, rotateY 2s linear 1;

}

@keyframes slideright {

to {

transform: translateX(300%);

}

}

@keyframes rotateY {

100% {

transform: rotateY(360deg);

}

}

🔍 تفاوت بین انیمیشن و ترنزیشن در CSS

ترنزیشن‌ها:

1. ساده و تک‌مرحله‌ای: ترنزیشن‌ها برای ایجاد تغییرات ساده و تک‌مرحله‌ای استفاده می‌شوند.
2. شروع با تعامل کاربر: ترنزیشن‌ها زمانی آغاز می‌شوند که یک تعامل کاربر رخ دهد.
3. ویژگی‌ها: شامل transition-property, transition-duration, transition-timing-function, و transition-delay.
4. استفاده آسان: استفاده از ترنزیشن‌ها بسیار ساده است و نیاز به تعریف کلید‌فریم‌ها ندارد.

انیمیشن‌ها:

1. پیچیده و چندمرحله‌ای: انیمیشن‌ها می‌توانند تغییرات پیچیده و چندمرحله‌ای را شامل شوند.
2. شروع خودکار یا با تعامل کاربر: انیمیشن‌ها می‌توانند به صورت خودکار یا بر اساس تعامل کاربر شروع شوند.
3. ویژگی‌ها: شامل animation-name, animation-duration, animation-timing-function, animation-delay, animation-iteration-count, animation-direction, و animation-play-state.
4. انعطاف‌پذیری بالا: انیمیشن‌ها بسیار انعطاف‌پذیر هستند و می‌توانند تغییرات متعددی را در طول زمان ایجاد کنند.

🎯 نتیجه‌گیری

یادگیری انیمیشن‌های CSS به من کمک کرده تا درک بهتری از ایجاد جلوه‌های بصری جذاب و بهبود تجربه کاربری داشته باشم. این تنها یک شروع است و بی‌صبرانه منتظرم تا پروژه‌های بیشتری را با استفاده از این مهارت‌ها ایجاد کنم.

آیا شما هم تجربه‌ای در زمینه انیمیشن‌های CSS دارید؟ خوشحال می‌شوم نظرات و تجربیات شما را بشنوم! 😊

#CSS #Animation #WebDevelopment #UX #UI #Frontend #LearningJourney