Question

我试图在添加类时使背景图像平滑淡入，并在删除类时淡出（到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";

但是它的作用是显示图像淡入并从左侧移动到中心。当褪色发生时，我希望它已经处于适当位置。怎么样？

Answer 1

试试这个link with this answer。另请查看this answer，因为可以使用jquery执行此操作。

如果没有，最后的办法可能就是将z-index图像放在所有其他图层下面，然后将其设置为常规DOM元素。

Answer 2

很难说没有看到你的类和javascript，但是根据我对css3过渡和动画的经验 - 类中包含过渡/动画的所有元素都将生效。因此，您需要有两个类来分隔动画中的静态css属性。将这些属性放在另一个类中，该div始终存在： -moz-transition：背景0.5s轻松进出; background-repeat：no-repeat; 背景位置：65px中心; background-size：“包含”;

然后只需切换具有动画属性的类： background：url（“/ PmDojo / dojox / widget / Standby / images / loading.gif”）;

因此，当您更改类时，您已启动“defaultClass”类，然后将其更改为“default animationClass”以切换动画/转换。希望有帮助吗？

Answer 3

也许问题已经结束，但我会尝试发布我的回答

此代码应该可以使用，只需使用您自己的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>

在CSS中为背景图像设置动画效果？

3 个答案: