Upon page load, a fade-in animation is applied to the main container. Although it functions properly in most browsers, it seems to have an issue in IE(9).
Is there a method to identify if the user's browser does not support CSS3 animations and disable them accordingly so that they can access the content of the page?
HTML
<body>
<span id="splash-title">
<img src="kuntosali/images/fc_yrityskeskus.png" class="pure-img" id="splash-logo" alt="logo" />
<img src="kuntosali/images/loading.gif" id="loading" alt="loading" />
</span>
<div class="splash-container">
<div class="splash">
<span class="splash-head"></span>
<p class="splash-subhead">
<span>FoxCenter</span> on kuntosali ja yrityskeskus.<br>
Kumpaa etsit?
</p>
<p>
<a href="yrityskeskus/" class="pure-button pure-button-primary">Yrityskeskus</a>
<a href="kuntosali/" class="pure-button pure-button-primary">Kuntosali
</a>
</p>
</div>
</div>
</body>
CSS
.splash {
/* absolute center .splash within .splash-container */
width: 80%;
height: 50%;
margin: auto;
position: absolute;
top: 100px; left: 0; bottom: 0; right: 0;
text-align: center;
text-transform: uppercase;
opacity: 0;
-webkit-animation: fade-in 2s forwards 4s;
-moz-animation: fade-in 2s forwards 4s;
-o-animation: fade-in 2s forwards 4s;
animation: fade-in 2s forwards 4s;
}