Why animate.css animation is played only once?

问题

I am checking the navigator onLine property changes. To achieve this, we are listening to the HTML5 online/offline window events, so when we are in the offline mode, I play a flipInX animation, and the same thing when connection comes back I play a flipInY animation, in this case it works properly :

#yh-app.yh-online & {
    @include animation(flipInX 1s);
}

#yh-app.yh-offline & {
    @include animation(flipInY 1s);
}

The problem comes when i try to play the same animation for both (offline and online modes) for example flipInX for both:

#yh-app.yh-online & {
    @include animation(flipInX 1s);
}

#yh-app.yh-offline & {
    @include animation(flipInX 1s);
}

In this case the animation is played only once !!! Does anyone have solution, Please? Thanks :)

来源：https://stackoverflow.com/questions/47410458/why-animate-css-animation-is-played-only-once