توفر الرسوم المتحركة CSS3 تأثيرات ديناميكية غنية لتصميم الويب، مما يجعل الصفحة أكثر حيوية وجاذبية. ومع ذلك، في بعض الأحيان نريد أن تظل الرسوم المتحركة في حالتها النهائية عند انتهائها، بدلاً من العودة إلى حالتها الأولية. ستقدم هذه المقالة عدة طرق لتحقيق هذا التأثير والتأكد من احتفاظ الرسوم المتحركة بهذه الحالة في نهاية الإجراء.
الطريقة الأولى: استخدام سمة animation-fill-mode
يتم استخدام خاصية animation-fill-mode للتحكم في نمط الرسوم المتحركة قبل التشغيل وبعده. من خلال تعيين هذه الخاصية، يمكنك تحقيق تأثير الحفاظ على الحالة النهائية عند انتهاء الرسوم المتحركة.
none : القيمة الافتراضية، لا يتم تطبيق الرسوم المتحركة على أي أنماط قبل التشغيل وبعده. forwards : احتفظ بالحالة النهائية بعد انتهاء الرسوم المتحركة. backwards : تطبق الرسوم المتحركة الحالة الأولية قبل التشغيل. both : من خلال الجمع بين forwards backwards ، تطبق الرسوم المتحركة الحالة الأولية قبل اللعب وتحافظ على الحالة النهائية بعد اللعب. .عنصر {
الرسوم المتحركة: سهولة الدخول إلى myAnimation 2؛
وضع ملء الرسوم المتحركة: للأمام؛
}
@keyframes myAnimation {
0% {
تحويل: ترجمةX(0);
}
100% {
تحويل: ترجمةX(100px);
}
} في هذا المثال، سيبقى عنصر .element في حالة transform: translateX(100px) بعد انتهاء الحركة.
الطريقة الثانية: استخدام حدث animationend
من خلال الاستماع إلى حدث animationend من خلال JavaScript، يمكنك ضبط نمط العنصر يدويًا عند انتهاء الرسوم المتحركة، وبالتالي الحفاظ على الحالة النهائية للرسوم المتحركة.
مثال
<div class="element"></div>
.عنصر {
العرض: 100 بكسل؛
الارتفاع: 100 بكسل؛
لون الخلفية: أحمر؛
الرسوم المتحركة: سهولة الدخول إلى myAnimation 2؛
}
@keyframes myAnimation {
0% {
تحويل: ترجمةX(0);
}
100% {
تحويل: ترجمةX(100px);
}
} عنصر ثابت = document.querySelector('.element');
element.addEventListener('animationend', () => {
element.style.transform = 'translateX(100px)';
}); في هذا المثال، عندما تنتهي الرسوم المتحركة، تقوم تعليمات JavaScript البرمجية بتعيين خاصية transform العنصر إلى translateX(100px) ، وبالتالي الحفاظ على الحالة النهائية للرسوم المتحركة.
الطريقة الثالثة: استخدام سمة transition
على الرغم من أن خاصية transition تُستخدم بشكل أساسي لتأثيرات الانتقال، إلا أنه باستخدامها بذكاء، يمكنك أيضًا تحقيق تأثير الحفاظ على الحالة النهائية عند انتهاء الرسوم المتحركة.
مثال
<div class="element"></div>
.عنصر {
العرض: 100 بكسل؛
الارتفاع: 100 بكسل؛
لون الخلفية: أحمر؛
الانتقال: تحويل 2s سهولة في الخروج؛
}
.العنصر.الرسوم المتحركة {
تحويل: ترجمةX(100px);
} عنصر ثابت = document.querySelector('.element');
element.classList.add('animate'); في هذا المثال، من خلال إضافة فئة animate ، تنتقل خاصية transform الخاصة بالعنصر من حالتها الأولية إلى translateX(100px) وتبقى في تلك الحالة بعد انتهاء النقل.
يمكن تحقيق الحفاظ على الحالة النهائية للرسوم المتحركة CSS3 دون تغيير بعدة طرق، بما في ذلك استخدام خاصية animation-fill-mode ، والاستماع إلى حدث animationend ، واستخدام خاصية transition . كل طريقة لها سيناريوهاتها القابلة للتطبيق، ويمكن للمطورين اختيار الطريقة المناسبة وفقًا للاحتياجات المحددة.
animation-fill-mode : مناسبة للرسوم المتحركة النقية في CSS، عن طريق تعيين قيمة forwards للحفاظ على الحالة النهائية للرسوم المتحركة. حدث animationend : مناسب للمشاهد التي تتطلب تفاعل JavaScript، ويمكن ضبط الأنماط يدويًا من خلال الاستماع إلى الأحداث. سمة transition : مناسبة لتأثيرات الانتقال، وذلك عن طريق إضافة فئة للحفاظ على الحالة النهائية للرسوم المتحركة.آمل أن تزودك هذه المقالة بفهم واضح وإرشادات عملية لمساعدتك على تطبيق رسوم CSS3 المتحركة بشكل أفضل في التطوير الفعلي وتحقيق التأثيرات الديناميكية المطلوبة.
بهذا نختتم هذه المقالة حول كيفية الحفاظ على الحالة النهائية للرسوم المتحركة CSS3 دون تغيير. لمزيد من المعلومات حول الحفاظ على الحالة النهائية للرسوم المتحركة CSS3 دون تغيير، يرجى البحث في المقالات السابقة على موقع downcodes.com أو متابعة تصفح المقالات ذات الصلة أدناه، وآمل أن تفعل ذلك افعل ذلك في المستقبل.