javascript - How to create an infinite easing in and out CSS animation loop? -

i want animate border of popup when ready receive draggable elements, i.e. has class "accepting". i've created finite ease-in animation, gives border nice blue glowy effect. it's ok is, ideally i'd effect ease in , out , in again on infinite loop while popup has class 'accepting'. here code.

if(popup.hasclass('accepting')) {    popup.css({           '-webkit-transition': 'all 0.3s ease-in-out',           'outline': 'none',           'padding': '3px 0px 3px 3px',           'margin': '5px 1px 3px 0px',           'box-shadow': '0 0 5px rgba(81, 203, 238, 1)',         }) } 

i've seen threads on here asking similar questions solutions involved using @webkit-keyframes selectors, , don't think can include additional selectors inside .css({}) jquery method. there simpler way can implement here, in javascript code?

thx u - gaweyne

you have use css animations animation-iteration-count:infinite.
like:

@keyframes glow{     100% {         outline: none;         padding: 3px 0 3px 3px;         margin: 5px 1px 3px 0;         box-shadow: 0 0 5px rgba(81, 203, 238, 1);     } } .glow-border {     animation-name: glow;     animation-duration: 0.35s;     animation-timing-function: ease-in-out;     animation-iteration-count:infinite; } 

changing code:

if(popup.hasclass('accepting')) {    popup.addclass('glow-border'); } 

check out css animations docs on mdn , don't forget prefix it.