IE: child loses animation when parent is temporarily hidden

After hiding and showing the parent, the child no longer rotates (loses css3 animation).

Removing the animation of the parent elements and doing hide / show will not cause the same problem (the problem occurs when the parent also has animation)

I tested in IE 11. Is this a known issue?

Here is the codenen code snippet (copied below) http://codepen.io/agirma/pen/byIEd

/*-------- CSS start ---------*/
@-webkit-keyframes show_content {
    from {
        -webkit-transform: scale(0);
        opacity:0;
        transform: scale(0);
        opacity:0;
    }
    to {
        -webkit-transform: scale(1);
        opacity:1;
        transform: scale(1);
        opacity:1;
    }
}
@keyframes show_content {
    from {
        -webkit-transform: scale(0);
        opacity:0;
        transform: scale(0);
        opacity:0;
    }
    to {
        -webkit-transform: scale(1);
        opacity:1;
        transform: scale(1);
        opacity:1;
    }
}
@-webkit-keyframes rotate_content {
    from {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    to {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}
@keyframes rotate_content {
    from {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    to {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}
#parent {
    display:block;
    background:gray;
    width: 100px;
    height: 100px;
    padding: 20px;
    -webkit-animation: show_content 4s;
    -ms-animation: show_content 4s;
    amimation: show_content 4s;
}
#child {
    display:block;
    width:80px;
    height: 80px;
    border:solid 1px red;
    -webkit-animation: rotate_content 1s linear infinite;
    -ms-animation: rotate_content 1s linear infinite;
    amimation: rotate_content 1s linear infinite;
}

/*------------CSS end----------*/

<div id="parent">
    <div id="child"></div>
</div>
<button onclick="toggleVisibility()">toggle display</button>
<script>
    function toggleVisibility() {
        var div = document.getElementById('parent');
        div.style.display = div.style.display == 'none' ? 'block' : 'none';
    }
</script>