اجرای کلاس انیمیشن css زمانی که المان مورد نظر در اسکرین باشد

[m.s.msrz]

سلام.
من یه سایت طراحی کردم و برای اینکه بتونم المان های مختلفش چه تصاویر و چه نوشته ها رو متحرک کنم از کلاس های انیمیشن w3schools استفاده کردم. مشکلم الان اینه که با لود شدن صفحه تمام انیمیشن ها اجرا می شوند حتی بخش هایی که در اسکرین قرار ندارند. می خواهم این قابلیت رو ایجاد کنم که با قرار گرفتن هر بخش در اسکرین کلاس انیمیشن مربوط بهش اجرا بشه. چندین روزه که دارم تلاش می کنم با سرچ کردن پیدا کنم و کدهای جاوااسکریپت مختلفیو امتحان کردم اما هیچ کدوم جواب نداده. برای مثال این یکی از کلاس های انیمیشنی هست که داخل css دارم:
.w3-animate-right{position:relative;animation:animateright 0.8s}@keyframes animateright{from{right:-300px;opacity:0} to{right:0;opacity:1}}
و مثلا اینجا سعی می کنم ازش استفاده کنم داخل کد
<html:<h2 ALIGN=RIGHT class="w3-right w3-animate-right">something</h2
خواهش می کنم اگر میتونید کمکم کنید. البته خودم آشناییم با جاوااسکریپت خیلی کمه. واقعا خیلی خیلی ممنون میشم...

[marasiali]

سلام شما باید یه کلاس جدید ایجاد کنین و انیمیشن رو به اون نسبت بدین بعد با جاوا اسکریپت بگین اگه اسکرول خورد و در صفحه دیده شد این کلاس رو به المانی که دارید اضافه کنه.
اینجا کاملتر نوشته:
https://stackoverflow.com/questions/16325679/activate-css3-animation-when-the-content-scrolls-into-view

البته کتابخونه های آماده هم برای اینکار وجود دارند مثل کتابخونه AOS که از لینک زیر قابل دسترسیه.
https://michalsnik.github.io/aos/