Question

我有这个伟大的剧本。它翻转页面并使用本文背面的JS代码显示新项目。但出于某种原因，在移动设备上，事情出了问题。 h1和h2元素消失......

问题在于这个css，当我移除@keyframes它消失了（但后来我失去了背景）：

.background{position:absolute;top:0px;right:0px;bottom:0px;left:0px}
.blue-purple{background-color:#2474c6;background-image:-webkit-linear-gradient(left, #2474c6, #165730);background-image:linear-gradient(to right,#2474c6, #165730);-webkit-animation:fadeInOut 13s ease;-moz-animation:fadeInOut 13s ease;animation:fadeInOut 13s ease;-webkit-animation-fill-mode:forwards;-moz-animation-fill-mode:forwards;animation-fill-mode:forwards;-webkit-animation-iteration-count:infinite;-moz-animation-iteration-count:infinite;animation-iteration-count:infinite}
.green-blue{background-color:#165730;background-image:-webkit-linear-gradient(left, #165730, #185a9d);background-image:linear-gradient(to right,#165730, #185a9d);-webkit-animation:fadeOutIn 13s ease;-moz-animation:fadeOutIn 13s ease;animation:fadeOutIn 13s ease;-webkit-animation-fill-mode:forwards;-moz-animation-fill-mode:forwards;animation-fill-mode:forwards;-webkit-animation-iteration-count:infinite;-moz-animation-iteration-count:infinite;animation-iteration-count:infinite}

@-webkit-keyframes "fadeInOut"{0%{opacity:0;}50%{opacity:1;}100%{opacity:0;}}
@-moz-keyframes "fadeInOut"{0%{opacity:0;}50%{opacity:1;}100%{opacity:0;}}
@keyframes "fadeInOut"{0%{opacity:0;}50%{opacity:1;}100%{opacity:0;}}
@-webkit-keyframes "fadeOutIn"{0%{opacity:1;}50%{opacity:0;}100%{opacity:1;}}@-moz-keyframes "fadeOutIn"{0%{opacity:1;}50%{opacity:0;}100%{opacity:1;}}
@keyframes "fadeOutIn"{0%{opacity:1;}50%{opacity:0;}100%{opacity:1;}}
@-webkit-keyframes "fadeIn"{from{opacity:0;}to{opacity:1;}}
@-moz-keyframes "fadeIn"{from{opacity:0;}to{opacity:1;}}
@keyframes "fadeIn"{from{opacity:0;}to{opacity:1;}}@-webkit-keyframes "fadeOut"{from{opacity:1;}to{opacity:0;}}
@-moz-keyframes "fadeOut"{from{opacity:1;}to{opacity:0;}}
@keyframes "fadeOut"{from{opacity:1;}to{opacity:0;}}

和一些HTML：

<body>

    <!----><div class="background blue-purple"></div>
    <div class="background green-blue"></div> 
    <div class="container">
        <div class="front">
            <div class="inner">
                <h1>text here</h1>
            </div>
                <span>sub text</span>
        </div>
        <div class="back">
             <h2>Text</h2>
             <p>Further Text</p>
        </div>
    </div>
    <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
    <script src="assets/js/index.js"></script>

</body>

CSS适用于桌面，Strange on Mobile

0 个答案: