أدم محمد2 نشر 15 سبتمبر 2021 أرسل تقرير مشاركة نشر 15 سبتمبر 2021 احاول ان اطبق الkeyframes على الشاشات بالاحجام المختلفة كل حجم له انيميشن خاص به ,كيف يمكن تحقيق ذلك 2 اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
0 محمد أبو عواد نشر 15 سبتمبر 2021 أرسل تقرير مشاركة نشر 15 سبتمبر 2021 يمكنك انشاء الkeyframes جميعها , على فرض لدينا عنصر لديه المعرف #test وأريد ان اطبق عليه في كل شاشة انيميشن مختلف, لننشئ الkeyframes في البداية @keyframes slideUp500 { 0% { transform: translate3d(0,500px,0); } 100% { transform: translate3d(0,0,0); } } @keyframes slideUp750 { 0% { transform: translate3d(0,750px,0); } 100% { transform: translate3d(0,0,0); } } لقد قمت بانشاء اثنان من الkeyframes ولكل واحد منهم انميشن خاص, الآن لنطبقهما على العنصر #test في شاشات مختلفة باستخدام الميديا كويري @media(max-width:500px) { #test { animation: slideUp500 1s forwards; } } @media(max-width:750px) { #test { animation: slideUp750 1s forwards; } } اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
0 شرف الدين حفني نشر 15 سبتمبر 2021 أرسل تقرير مشاركة نشر 15 سبتمبر 2021 يمكنك تحقيق ذلك عن طريق أن تقوم بإنشاء أكثر من keyframe كل واحد لكل حجم , ومن ثم تقوم بتغيير خاصية الanimation-name حسب تغيير حجم الشاشة عن طريق media query @keyframes myanim{ //شفرتك البرمجية } @keyframes myanim_xs{ //شفرتك البرمجية } #myAnimated{ animation-name:myanim; } @media screen and (max-width: 500px) { #myAnimated { animation-name: myanim_xs; } } يمكنك أيضا أن تقوم بإدماج الkeyframes بداخل الmedia query ولكن قد ﻻ يعمل هذا الأمر على المتصفحات الأقدم @media screen and (max-width: 800px) { @keyframes test{ //شفرتك البرمجية } #myAnimated{ animation-name:test } } اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
السؤال
أدم محمد2
احاول ان اطبق الkeyframes على الشاشات بالاحجام المختلفة كل حجم له انيميشن خاص به ,كيف يمكن تحقيق ذلك
رابط هذا التعليق
شارك على الشبكات الإجتماعية
2 أجوبة على هذا السؤال
Recommended Posts
انضم إلى النقاش
يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.