هل يمكن جعل العنصر الذي له انميشن يتوقف على الحالة التي ينتهي بها الانميشن اي لا يعود الى وضعه الافتراضي بعد انتهاء الانميشن
مرحبا ! كمان سؤال😁
إن كنت تستعمل CSS لتحريك العنصر فيمكنك أن تقوم بإضافة الخاصية animation-fill-mode بقيمة forwards إلى العنصر، على النحو التالي:
<style>
div {
width: 100px;
height: 100px;
background: red;
position: relative;
animation-name: example;
animation-duration: 3s;
animation-fill-mode: forwards; /* لجعل العنصر على حالته الأخيرة */
}
@keyframes example {
from {top: 0px;}
to {top: 200px; background-color: blue;}
}
</style>
<body>
<div></div>
</body>
في المثال السابق سوف يتحرك العنصر div ويتغير لونه إلى الأزرق وفي نهاية التحريك سوف يظل على نفس الحالة ونفس المكان.
يمكنك أن تقرأ أكثر حول الخاصية animation-fill-mode من خلال موسوعة حسوب من هنا:
تمام شكراً
بس ليش فقط خاصية
opacity:0;
هي الي تطبق وخاصية
display:none;
تتطبق
علما الن العنصر الذي لدي هو عبارة عن باركراف
الخاصية opacity تقوم بتعديل الشفافية الخاصة بالعنصر وبالتالي سوف يظل العنصر مكانه حتى ولو كان شفاف بالكامل، بينما الخاصية display تتحكم في طريقة عرض العنصر وهي من الخصائص التي لا يمكن تطبيق animation عليها في CSS3. ولحل هذه المشكلة يمكنك أن تقوم بإستخدام height: 0 مع opacity: 0 للحصول على تأثير مشابهة، كالتالي:
<style>
p {
animation-name: example;
animation-duration: 1s;
animation-fill-mode: forwards;
}
@keyframes example {
0% {}
100% {opacity: 0; height: 0;}
}
</style>
<body>
<p>Let the div element retain the style values set by the last keyframe when the animation ends:</p>
<div>Div content</div>
</body>
لمعرفة الخصائص التي يمكن إستخدامها في عمل تحريك Animation، يمكنك الإطلاع على هذه الصفحة من توثيق MDN:
التعليقات