0

クラスが追加されたときに背景画像をスムーズにフェードインさせ、クラスが削除されたときに（divに）フェードアウトさせようとしています。

私の現在のCSS（Firefoxでのみテスト済み）

background : url("/PmDojo/dojox/widget/Standby/images/loading.gif");
-moz-transition : background 0.5s ease-in-out;
background-repeat: no-repeat;
background-position: 65px center;
background-size: "contain";

しかし、それは、画像がフェードインし、左から中央に移動することを示しています。フェードインが発生したときに、すでに所定の位置にあるようにします。どのように？

4

3 に答える 3

0

この答えでこのリンクを試してください。また、この回答を確認してください。jqueryでこれを実行できる可能性があります。

そうでない場合、最後の手段は、z-indexを使用して画像を他のすべてのレイヤーの下に配置し、それを通常のDOM要素としてアニメーション化することです。

于 2012-11-16T21:26:45.417 に答える
0

クラスとjavascriptを見ないとわかりませんが、css3トランジションとアニメーションの経験から、トランジション/アニメーションが適用されているクラスのすべての要素が有効になります。したがって、静的cssプロパティをアニメーション化プロパティから分離するために2つのクラスが必要になります。これらのプロパティを、常に存在するそのdivの別のクラスに配置します。-moz-transition：background 0.5s ease-in-out; background-repeat：no-repeat; 背景位置：65px中央; background-size： "contain";

次に、アニメーションプロパティを持つクラスを切り替えます。background：url（ "/ PmDojo / dojox / widget / Standby / images / loading.gif"）;

したがって、クラスを変更するときは、「defaultClass」クラスを開始してから、アニメーション/トランジションを切り替えるために「defaultanimationClass」に変更します。それがお役に立てば幸いですか？

于 2012-11-16T21:42:01.090 に答える
0

多分質問は閉じられていますが、私は私の答えを投稿しようとします

このコードは機能するはずです。独自のbg.jpgを使用してください。

<html>
<head>
    <title>some title</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0"><style> 
        #bg {
            -moz-animation: bg 60s linear infinite;
            -webkit-animation: bg 60s linear infinite;
            -o-animation: bg 60s linear infinite;
            -ms-animation: bg 60s linear infinite;
            animation: bg 60s linear infinite;
            -moz-backface-visibility: hidden;
            -webkit-backface-visibility: hidden;
            -o-backface-visibility: hidden;
            -ms-backface-visibility: hidden;
            /*backface-visibility: hidden;*/  //ORIGIN
            backface-visibility: visible;
            -moz-transform: translate3d(0,0,0);
            -webkit-transform: translate3d(0,0,0);
            -o-transform: translate3d(0,0,0);
            -ms-transform: translate3d(0,0,0);
            transform: translate3d(0,0,0);
            /* Set your background with this */
            background: #348cb2 url("images/bg.jpg") bottom left;
            background-repeat: repeat-x;
            height: 100vh;
            left: 0;
            opacity: 1;
            position: fixed;
            top: 0;
        }
        @-moz-keyframes     bg { 0% { -moz-transform: translate3d(0,0,0); -webkit-transform: translate3d(0,0,0); -o-transform: translate3d(0,0,0); -ms-transform: translate3d(0,0,0); transform: translate3d(0,0,0); } 100% { -moz-transform: translate3d(-2250px,0,0); -webkit-transform: translate3d(-2250px,0,0); -o-transform: translate3d(-2250px,0,0); -ms-transform: translate3d(-2250px,0,0); transform: translate3d(-2250px,0,0); } }
        @-webkit-keyframes  bg { 0% { -moz-transform: translate3d(0,0,0); -webkit-transform: translate3d(0,0,0); -o-transform: translate3d(0,0,0); -ms-transform: translate3d(0,0,0); transform: translate3d(0,0,0); } 100% { -moz-transform: translate3d(-2250px,0,0); -webkit-transform: translate3d(-2250px,0,0); -o-transform: translate3d(-2250px,0,0); -ms-transform: translate3d(-2250px,0,0); transform: translate3d(-2250px,0,0); } }
        @-o-keyframes       bg { 0% { -moz-transform: translate3d(0,0,0); -webkit-transform: translate3d(0,0,0); -o-transform: translate3d(0,0,0); -ms-transform: translate3d(0,0,0); transform: translate3d(0,0,0); } 100% { -moz-transform: translate3d(-2250px,0,0); -webkit-transform: translate3d(-2250px,0,0); -o-transform: translate3d(-2250px,0,0); -ms-transform: translate3d(-2250px,0,0); transform: translate3d(-2250px,0,0); } }
        @-ms-keyframes      bg { 0% { -moz-transform: translate3d(0,0,0); -webkit-transform: translate3d(0,0,0); -o-transform: translate3d(0,0,0); -ms-transform: translate3d(0,0,0); transform: translate3d(0,0,0); } 100% { -moz-transform: translate3d(-2250px,0,0); -webkit-transform: translate3d(-2250px,0,0); -o-transform: translate3d(-2250px,0,0); -ms-transform: translate3d(-2250px,0,0); transform: translate3d(-2250px,0,0); } }
        @keyframes          bg { 0% { -moz-transform: translate3d(0,0,0); -webkit-transform: translate3d(0,0,0); -o-transform: translate3d(0,0,0); -ms-transform: translate3d(0,0,0); transform: translate3d(0,0,0); } 100% { -moz-transform: translate3d(-2250px,0,0); -webkit-transform: translate3d(-2250px,0,0); -o-transform: translate3d(-2250px,0,0); -ms-transform: translate3d(-2250px,0,0); transform: translate3d(-2250px,0,0); } }

        #bg {
            background-size: 2250px auto;
            width: 6750px;
        }</style>
</head>
<body>
    <div id="bg"></div>
</body></html>
于 2015-07-26T18:52:22.497 に答える