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 属性与动画属性分开。将这些属性放在始终存在的 div 的另一个类上：-moz-transition : background 0.5s ease-in-out; 背景重复：不重复；背景位置：65px 中心；背景尺寸：“包含”；

然后只需切换具有动画属性的类： background : url("/PmDojo/dojox/widget/Standby/images/loading.gif");

因此，当您更改类时，您会说“defaultClass”类开始，然后将其更改为“default animationClass”以切换动画/过渡。希望有帮助吗？

于 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 回答