transform - Transition / Transform Internet Explorer 10もanimate.css

Question

ie 10 で作業している animate.css からの移行と変換にはちょっと驚きました。それで、Folio 用に何かをすばやく下書きし始め、最終的には animate.css のアニメーションを少し使ったきれいな Web サイトを作成しました。

残念ながら、新しいコードでは、これらのアニメーションは ie 10 では機能しなくなりました。誰かが私に何が起こったのか教えてもらえますか?

HTML index.html

<!DOCTYPE html>
<!--[if lt IE 7 ]><html class="ie ie6" lang="fr"> <![endif]-->
<!--[if IE 7 ]><html class="ie ie7" lang="fr"> <![endif]-->
<!--[if IE 8 ]><html class="ie ie8" lang="fr"> <![endif]-->
<!--[if (gte IE 9)|!(IE)]><!--><html lang="fr"> <!--<![endif]-->
<head>

    <meta charset="utf-8" />
    <title>Alexandre David</title>
    <meta name="description" content="Hello. I'm Alexandre David a Paris based designer and front-end developer.">

    <!--[if lt IE 9]>
        <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->

    <!-- IE 9 Standards mode beginning -->
        <meta http-equiv="X-UA-Compatible" content="IE=9">
    <!-- IE 9 Standards mode ending -->

    <!--[if lte IE 9]><link rel="stylesheet" href="template/css/ie.css" type="text/css" media="screen" /><![endif]-->

    <!-- MOBILE METAS -->

    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

    <!-- CSS -->

    <link rel="stylesheet" type="text/css" href="template/css/base.css" media="screen">
    <link rel="stylesheet" type="text/css" href="template/css/animate.css" media="screen">
    <link rel="stylesheet/less" type="text/css" href="template/css/layout.less" media="screen">

    <!-- FAVICONS -->

    <link rel="shortcut icon" href="template/img/favicon.ico">

</head>
<body>



    <!-- WRAPPER -->

    <div id="wrapper"></div>

    <!-- CONTENT -->

    <div id="content" class="container animated fadeInDown">
        <div class="row">
            <ul>
                <li><a href="https://www.facebook.com/weareubster" target="_blank" class="ubster">Listen my playlist on Ubster</a></li>
                <li><a href="http://dribbble.com/daboloskov" class="dribbble">See my work on Dribbble</a></li>
                <li><a href="https://twitter.com/daboloskov" class="twitter">Follow me on Twitter</a></li>
            </ul>
        </div>
    </div>

    <!-- JS -->

    <script src="template/js/jquery.js"></script>
    <script src="template/js/jquery.ui.js"></script>
    <script src="template/js/less.js" type="text/javascript"></script>
    <script type="text/javascript" src="template/js/css3-mediaqueries.js"></script>



</body>
</html>

LESS レイアウト.レス

/*=================================================
TABLE OF CONTENT
===================================================*/

/*  #COLORS
    #IMPORT
    #RADIUS
    #SHADOWS
    #TRANSITIONS
    #CONTENT & WRAPPER  */

/*  IMPORT  */  

    @import "animate.css";

/*  #COLORS */  

    @white: #fff;
    @black: #2b3238;
    @iron: #858c99;

/*  #RADIUS */

    .border-radius (@values) {
        -webkit-border-radius: @values;
        -moz-border-radius: @values;
        -ms-border-radius: @values;
        -o-border-radius: @values;
        border-radius: @values;
    }

/*  #SHADOWS    */

    .box-shadow (@values) {
        -webkit-box-shadow: @values;
        -moz-box-shadow: @values;
        box-shadow: @values;
    }

/*  #TRANSITIONS    */

    .transition (@values) {
        -webkit-transition: @values;
        -moz-transition: @values;
        -ms-transition: @values;
        -o-transition: @values;
        transition: @values;
    }

/*  #TRANSFORM  */

    .transform (@values) {
        -webkit-transform: @values;
        -moz-transform: @values;
        -ms-transform: @values;
        -o-transform: @values;
        transform: @values;
    }

/*  #BODY & HTML    */

    body { padding: 0; margin: 0; background-color: #3c414d; }

    html, body { min-height: 100%; height: 100%; }

/*  #CONTENT & WRAPPER  */

    #wrapper { position: relative; min-height: 40%; }

    #content {
        position: relative; min-height: 50%;

        .row {
            text-align: center;
            height: 128px;
            padding-top: 10px;

            ul li {
                display: inline-block;
                margin: 0 20px;

                a {
                    display: block;
                    height: 116px;
                    width: 116px;
                    text-indent: -9999px;
                    .border-radius (100%);
                    .box-shadow (~"0px 3px 0px 1px rgba(40, 45, 55, .52), 0px 1px 0px 0px rgba(255, 255, 255, .16) inset");
                }

                .ubster{
                    background: url("../img/sprite.png") no-repeat scroll 0px 0px #fd6f4b;
                    .transition (.1s ease-in-out);
                    .transform (scale(0.9));

                        &:hover { .transform (scale(1)); }
                }

                .dribbble {
                    background: url("../img/sprite.png") no-repeat scroll -116px 0px #ea4c89;
                    .transition (.1s ease-in-out);
                    .transform (scale(0.9));

                        &:hover { .transform (scale(1)); }
                }

                .twitter {
                    background: url("../img/sprite.png") no-repeat scroll -232px 0px #00aced;
                    .transition (.1s ease-in-out);
                    .transform (scale(0.9));

                        &:hover { .transform (scale(1)); }
                }
            }
        }
    }

CSSアニメーション.css

.animated{-webkit-animation-fill-mode:both;-moz-animation-fill-mode:both;-ms-animation-fill-mode:both;-o-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:1s;-moz-animation-duration:1s;-ms-animation-duration:1s;-o-animation-duration:1s;animation-duration:1s;}.animated.hinge{-webkit-animation-duration:2s;-moz-animation-duration:2s;-ms-animation-duration:2s;-o-animation-duration:2s;animation-duration:2s;}@-webkit-keyframes fadeInDown {

    0% {
        opacity: 0;
        -webkit-transform: translateY(-20px);
    }   100% {
        opacity: 1;
        -webkit-transform: translateY(0);
    }
}

    @-moz-keyframes fadeInDown {
        0% {
            opacity: 0;
            -moz-transform: translateY(-20px);
        }

        100% {
            opacity: 1;
            -moz-transform: translateY(0);
        }
    }

    @-o-keyframes fadeInDown {
        0% {
            opacity: 0;
            -o-transform: translateY(-20px);
        }

        100% {
            opacity: 1;
            -o-transform: translateY(0);
        }
    }

    @keyframes fadeInDown {
        0% {
            opacity: 0;
            transform: translateY(-20px);
        }

        100% {
            opacity: 1;
            transform: translateY(0);
        }
    }

    .fadeInDown {
        -webkit-animation-name: fadeInDown;
        -moz-animation-name: fadeInDown;
        -o-animation-name: fadeInDown;
        animation-name: fadeInDown;
    }
    @-webkit-keyframes fadeInLeft {
        0% {
            opacity: 0;
            -webkit-transform: translateX(-20px);
        }

        100% {
            opacity: 1;
            -webkit-transform: translateX(0);
        }
    }

    @-moz-keyframes fadeInLeft {
        0% {
            opacity: 0;
            -moz-transform: translateX(-20px);
        }

        100% {
            opacity: 1;
            -moz-transform: translateX(0);
        }
    }

    @-o-keyframes fadeInLeft {
        0% {
            opacity: 0;
            -o-transform: translateX(-20px);
        }

        100% {
            opacity: 1;
            -o-transform: translateX(0);
        }
    }

    @keyframes fadeInLeft {
        0% {
            opacity: 0;
            transform: translateX(-20px);
        }

        100% {
            opacity: 1;
            transform: translateX(0);
        }
    }

    .fadeInLeft {
        -webkit-animation-name: fadeInLeft;
        -moz-animation-name: fadeInLeft;
        -o-animation-name: fadeInLeft;
        animation-name: fadeInLeft;
    }

ご清聴ありがとうございました。:)

[編集]：

ここで IE10 アニメーションテストを実行できます (アニメーションの動作): http://seldoon182.free.fr/ie10/

ここで私のウェブサイトを実行できます (アニメーションは機能しません): http://seldoon182.free.fr/dabolo/

transform - Transition / Transform Internet Explorer 10もanimate.css

0 に答える 0

Related

Reference