javascript - Disable CSS3 animations on incompatible browsers? -


I have fade-animation on the main container on page load.
It works fine with all browsers IE (9)

Is there a way to find out that the user is using an incompatible browser with a CSS3 animation and can disable them so that they can see the page?

HTML

& lt; Body & gt; & Lt; Span id = "splash-title" & gt; & Lt; Img src = "kuntosali / images / fc_yrityskeskus.png" class = "pure-img" id = "splash-logo" alt = "logo" /> & Lt; Img src = "kuntosali / images / loading.gif" id = "loading" alt = "loading" /> & Lt; / Span & gt; & Lt; Div class = "splash-container" & gt; & Lt; Div class = "splash" & gt; & Lt; Span class = "splash-head" & gt; & Lt; / Span & gt; & Lt; P class = "split-sub-heading" & gt; & Lt; Period & gt; FoxCenter's & lt; / Span & gt; On the Cantonese and Yeritishkas & Lt; Br> Kamba Itats? & Lt; / P & gt; & Lt; P & gt; & Lt; A href = "yrityskeskus /" class = "pure-button pure-button-primary" & gt; Yurituskskas & lt; / A & gt; & Lt; A href = "kuntosali /" class = "pure-button pure-button-primary" & gt; Contosely & lt; / A & gt; & Lt; / P & gt; & Lt; / Div & gt; & Lt; / Div & gt; & Lt; / Body & gt;

CSS 

  .splash {/ * full center .splash-container * / width: 80%; Height: 50%; Margins: Auto; Status: Completed; Top: 100px; Left: 0; Bottom: 0; Correct: 0; Text align: center; Text-transform: uppercase; Opacity: 0; Webkit-Animation: Feed-in 2S Forward 4S; -MOZ Animation: Feed-in 2S Forward 4S; -O-Animation: Feed-in 2S Forward 4S; Animation: Feed-in 2S Forward 4S; }

As directed by @Karley-Andraggan, for modern use This can be the safest way to go away. It then returns a no-cssemension class to tag, when a browser can not use CSS3 animation

You can use it to add "non-CSS3-animation support CSS or Javascript":

  • You will in the code .no-cssanimations .splash In Javascript you can:

    if (Modernizr.cssanimations) {/ * ... something ... /}

    < P> if ($ (".no-cssanimations") length) {/ * ... something ...} / Modernizr development version:
  • Modernizr makes custom (for contracts ):

Comments

Post a Comment