كيفية تطبيق keyframes على الميديا كويري في CSS

يمكنك انشاء ال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;
    }
}

يمكنك تحقيق ذلك عن طريق أن تقوم بإنشاء أكثر من 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
  }
}