Cancellation of an animation in CSS

Question

Hello, I've an issue with an animation in CSS, I'm trying to make a "3d" flip card animation in CSS. I already have a working version, but on this version the card just rotates one time, but I want to make an animation, with rotations/zooms/ect...

Here is the function I use to rotate the card :

function test() {
    var sheet = window.document.styleSheets[0]

    /* Working */
    //sheet.insertRule('.flip-container .flipper{-webkit-transform: rotateY(-180deg);-moz-transform: rotateY(-180deg);-o-transform: rotateY(-180deg);transform: rotateY(-180deg);-webkit-transform: rotateY(-180deg);}', sheet.cssRules.length);

    /* Isn't working */
    sheet.insertRule('.flip-container .flipper{animation-name: test; animation-duration: 1.5s; animation-delay: 0.1s;}', sheet.cssRules.length);
}

The first version who works add css -webkit-transform: rotation rules in the css file when the button is pressed, that make the card flip and everything is alright. https://jsfiddle.net/3Lnt4fe3/4/

The second version who doesn't work add css animation-name rule in the css file, in the css file, the @keyframe is already declared. The animation is running well but when it ends, the rotation is canceled... https://jsfiddle.net/3Lnt4fe3/5/

Can someone help me to prevent the cancellation of the animation? Thanks

Cancellation of an animation in CSS

1 Answers