0

Css3 过渡仅在 chrome 中工作，在 safari 和 mozilla 中不起作用。

这是代码

<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>
4

1 回答 1

2

也包括transition: opacity 0.5s ease-in;在您的#mainFrame.

CSS 过渡属性可以在没有任何前缀提供者的情况下使用，但由于规范最近才实现稳定，因此基于 WebKit 的浏览器仍然需要供应商前缀。

资源

并且

更改以下CSS

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

对此并检查一次：

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

更新2 ：（ 来源）

添加?wmode=opaque到您的 youtube 网址。在这里工作正常:)。

工作小提琴

于 2013-06-13T11:02:58.820 回答