CSS animation, Safari problem

dabblet.css

/**
 * CSS animation, Safari problem
 */

@keyframes makeVisible {
	from {transform: rotate(0deg);}
	to {transform: rotate(360deg);}
}

@-webkit-keyframes makeVisible {
	0% { -webkit-transform:rotate(0deg); }
	100% { -webkit-transform:rotate(360deg); }
}

#animation {
    position: relative;
    width: 300px;
    height: 300px;
    margin: 80px;
    line-height: 300px;
    text-align: center;
    z-index: 2;
}
#animation::before {
    content: "";
    position: absolute;
    left: 0;
    width: 300px;
    height: 300px;
    border: 1px solid #999;
    background-color: #FCC;
    z-index: -1;
    
    animation-name: makeVisible; 
	animation-duration: 4s;
	animation-iteration-count: infinite; 
	animation-timing-function: linear;
    
    -webkit-animation-name: makeVisible;
	-webkit-animation-duration: 4s;
	-webkit-animation-timing-function: linear;
	-webkit-animation-delay: initial;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-direction: initial;
	-webkit-animation-fill-mode: initial;
}

dabblet.html

<div id="animation">
    Hier soll der "Hintergrund" rotieren ...
</div>

dabblet.js

// alert('Hello world!');

settings.json

{"view":"separate","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}