97. التحكم في حالات الرسوم المتحركة

هناك خاصيتان ضروريتان للتحكم في حالة العنصر قبل وبعد تشغيل الرسوم المتحركة.

1. animation-fill-mode

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

حالة استخدام: إذا قمت بتحريك زر ليتحرك 10 بكسل للأسفل، فمن المحتمل أنك تريد animation-fill-mode: forwards; لكي يظل في الموضع الذي انتقل إليه.

2. animation-play-state

تسمح لك بإيقاف الرسوم المتحركة مؤقتاً أو استئنافها، وغالباً ما تُستخدم بالاشتراك مع :hover.

css .slider { animation: slide 10s linear infinite; animation-play-state: running; }

.slider:hover { animation-play-state: paused; /* إيقاف الرسوم المتحركة مؤقتاً عندما يحوم المستخدم بالماوس */ }