هل يمكن تضمين فنكشن JS داخل انميشنCSS ؟

وعليكم السلام.

في js لدينا الطريقة ()document.getAnimations والتي سترجع مصفوفة من الانميشن الذي سبق تعريفه والتي لا تزال فعالة -لم تنتهي- في css، وكل انميشن عبارة عن obj غرض يحوي اسم الانميشن والزمن الحالي: timeline - animationName وغيرها من الخصائص التي يمكنك الاستفادة منها.

كل ما عليك أن تحدد الانميشن عن طريق:

const myAnim = document.getAnimations().find(
    animation => animation.animationName === "yourAnimationName" // اسم الانميشن الذي لديك
)

هذا سيرجع لك غرض هو الانميشن الذي تريده، وحتى تأتي بالزمن الحالي:

myAnim.currentTime

احسب الزمن الذي سيكون منتصف الانميشن وقسم الزمن الحالي عليه، مثلا أنا أريد بعد ثلاث ثوان أن تتنفذ وظيفة معينة ولتكن myfunction فكتبت:

const myFunction = () => {
      console.log("START");
}
const interval = setInterval(() => {
      const time = document.getAnimations().find(
      animation => animation.animationName === "myAnimation")
      .currentTime
      if(Math.floor(time / 3100 - 1) === 0) { // يتحقق عندما يصبح زمن بداية البرنامج ثلاث ثوانٍ أول مرة
            myFunction(); // أنفذ الوظيفة التي أريدها
            clearInterval(interval); // أنهي الحدث لأني لن أحتاجه بعد التنفيذ
      }
      }, 1000)

إذا كان الانميشن الخاص بك لا يبدأ مع بداية البرنامج فبإمكانك أن تأتي بزمن بداية الانميشن عن طريق

const startAt = myAnim.startTime

تطرحه من الtimeLine فيصبح معك كم مضى من الوقت على بداية الانميشن، وهكذا يمكنك التحكم بأي أنميشن.