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