animation-name hack

animation_name_hack.css

body {
  animation-duration: 0.001s;
}
@media screen and (min-width: 769px) {
  body {
    animation-name: media-table;
  }
}
@media screen and (max-width: 768px) {
  body {
    animation-name: media-mobile;
  }
}

@keyframes min-width-700px {
  from { clip: rect(1px, auto, auto, auto); }
  to { clip: rect(0px, auto, auto, auto); }
}

@keyframes min-width-1000px {
  from { clip: rect(1px, auto, auto, auto); }
  to { clip: rect(0px, auto, auto, auto); }
}

usage.js

// on condition
$('body').css('animation-name') !== 'media-mobile'

// on event
var dispatchEvent = function(event) {
  if (event.animationName === 'media-mobile') {
    $('.new__payment__summary__w').fixTo('stop');
  } else if (event.animationName === 'media-table') {
    $('.new__payment__summary__w').fixTo('start');
  }
};
document.addEventListener('animationEnd', dispatchEvent, false);