Css3 transitions working in chrome only, doesn't work in safari and mozilla

Question

Css3 transitions working in chrome only, doesn't work in safari and mozilla.

Here is the code

<html>
<head>
    <title>Simple Fade-in/Fade-out animation</title>
    <style type="text/css">
        /* Style for button */
        #myBtn
        {
            width:80px;
        }

        /* Style for image */
        #mainFrame
        {
            -webkit-transition: opacity 0.5s ease-in;
            -moz-transition: opacity 0.5s ease-in;
            -o-transition: opacity 0.5s ease-in;
        }
        #mainFrame.fade-out
        {
            opacity:0;
        }
        #mainFrame.fade-in
        {
            opacity:1;
        }

    </style>
    <script type="text/javascript">
        function fade(btnElement) {
            if (btnElement.value === "Fade Out") {
                document.getElementById("mainFrame").className = "fade-out";
                btnElement.value = "Fade In";
            }
            else {
                document.getElementById("mainFrame").className = "fade-in";
                btnElement.value = "Fade Out";
            }
        }
    </script>
</head>
<body>
    <h3>Simple fade-in/fade-out example</h3>
    <input id="myBtn" type="button" value="Fade Out" onclick="fade(this);" />

    <iframe id="mainFrame" width="300" height="400" frameborder="0" src="http://www.youtube.com/embed/rT_OmTMwvZI"
                            allowfullscreen></iframe>
</body>
</html>

Try `btnElement.value == "Fade Out"` instead of `btnElement.value === "Fade Out"`. — Mr_Green, Jun 13 '13 at 10:52
wait, It do apply className but don't make the transition effect or it neither applies the className? — Pablo Recalde, Jun 13 '13 at 11:02
@SaurabhLP using jsfiddle won't be able to test browser compatibility.Simply copy paste the whole code and try browsing using chrome and mozilla — iJade, Jun 13 '13 at 11:36

score 2 · Accepted Answer · edited May 23 '17 at 12:28

2

Include also transition: opacity 0.5s ease-in; in your #mainFrame.

CSS transition properties can be used without any prefix provider, but since the specification has only recently achieved stability, the vendor prefixes can still be necessary for browsers based on WebKit.

Source

and also

Change the below css

 #mainFrame.fade-out {
     opacity:0;
 }
 #mainFrame.fade-in {
     opacity:1;
 }

to this and check once:

 .fade-out {
     opacity:0;
 }
 .fade-in {
     opacity:1;
 }

UPDATE2: (source)

Add ?wmode=opaque to your youtube url. Working fine here :).

Working Fiddle

edited May 23 '17 at 12:28

Community

1
1

answered Jun 13 '13 at 11:02

Mr_Green

40,727
45
159
271

also check your browser support for transitions – Pablo Recalde Jun 13 '13 at 11:11
@iBlue I updated my post. please check once. and also clear the cache of your browser. – Mr_Green Jun 13 '13 at 11:18
@iBlue I highly suspect that there could be a possible bug in your code. please check developer tool once. and also what about the classes `fade-in` and `fade-out`? are they working properly in firefox? – Mr_Green Jun 13 '13 at 11:25
ok...i just checked with mozilla developer console.The class is working.And i saw an odd thing, when i inspect the iframe using developer tool the iframe turns black.And then if i click fade in and fade out it works. – iJade Jun 13 '13 at 11:29
@iBlue I am not sure about it. Honestly, I just searched for your issue on stackoverflow. check the link which I provided it has more info about this issue. – Mr_Green Jun 13 '13 at 11:55

Css3 transitions working in chrome only, doesn't work in safari and mozilla

1 Answers1