将 CSS 动画与页面的其余部分隔离开来答案

【问题标题】：Isolating CSS animation from rest of page将 CSS 动画与页面的其余部分隔离开来
【发布时间】：2017-06-19 07:33:06
【问题描述】：

有一个 CSS 加载动画，我很高兴。有点问题，不知道有没有人知道解决办法。

这是动画当前的工作方式：http://www.wilsonschlamme.com/animation.html

我想将整个内容涂黑，当动画达到最大尺寸时，黑屏就会消失。所以在加载整个页面时，除了动画之外，整个页面都是黑色的。一旦动画达到 MAX 尺寸，所有内容都会出现。

对此有什么想法吗？真的很感激任何事情。玩得开心，只需要完善一些东西。谢谢。

html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<html lang="en">
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="animation.css">
<link rel="stylesheet" type="text/css"     
href="http://fonts.googleapis.com/css?family=Dorsa" <script     
type="text/javascript">
</script>
<script     
src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'>    
</script>
<meta http-equiv="refresh" content="270"/>
<!--time and date-->
<div id="timeandate">
<script>
function makeArray() {
 for (i = 0; i<makeArray.arguments.length; i++)
this[i + 1] = makeArray.arguments[i];
 }
 var months = new makeArray('January','February','March','April','May',
 'June','July','August','September','October','November','December');
 var date = new Date();
 var day = date.getDate();
 var month = date.getMonth() + 1;
 var yy = date.getYear();
 var year = (yy < 1000) ? yy + 1900 : yy;
 document.write(day + " " + months[month] + " " + year);
 window.onload = function () {
    DisplayCurrentTime();
  };
 function DisplayCurrentTime() {
    var date = new Date();
    var hours = date.getHours() > 12 ? date.getHours() - 12 :      
  date.getHours();
    var am_pm = date.getHours() >= 12 ? "PM" : "AM";
    hours = hours < 10 ? "0" + hours : hours;
    var minutes = date.getMinutes() < 10 ? "0" + date.getMinutes() :      
    date.getMinutes();
    var seconds = date.getSeconds() < 10 ? "0" + date.getSeconds() :     
  date.getSeconds();
    time = hours + ":" + minutes + ":" + seconds + " " + am_pm;
    var lblTime = document.getElementById("lblTime");
    lblTime.innerHTML = time;
  };
 <!--thisisanimation-->
  jQuery(document).ready(function($) {
  function timer() {
  setTimeout(endAnim, 1000);  
   }
  timer();
  function restartAnim() {
 $('.loader-icon').removeClass('shrinking-cog').addClass('spinning-cog');
 $('.loader-background').addClass('color-flip'); 
 timer();
 $('.switches').show();
  }
 function endAnim() {
 $('.loader-icon').removeClass('spinning-cog').addClass('shrinking-cog');
  $('.loader-background').removeClass('color-flip'); 
 $('.again').delay(100).fadeIn('slow');
 $('.switches').fadeOut('slow');
 }
 $('.again').on('click', function(e) {
 e.preventDefault();
 restartAnim();
  });
  $('.switch').on('click', function(e) {
 var trigger = $(this);
 if ( !trigger.hasClass('active') ) {
  $('#loader').find('.loader-icon').addClass('hidden').filter('[data-cog*="'     
 +  trigger.data('trigger') + '"]').removeClass('hidden');
  trigger.addClass('active').siblings('.active').removeClass('active');
 }
 e.preventDefault();
 });
 });
</script>
 <div id="loader" class="overlay-loader">
    <div class="loader-background color-flip">
    </div>
    <img class="loader-icon spinning-cog" 
 src="http://pasqualevitiello.github.io/Tumblr-Style-Cog-
 Spinners/cogs/cog01.svg" data-cog="cog01">
    <img class="loader-icon spinning-cog hidden" 
src="http://pasqualevitiello.github.io/Tumblr-Style-Cog-
Spinners/cogs/cog02.svg" data-cog="cog02">
    <img class="loader-icon spinning-cog hidden" 
src="http://pasqualevitiello.github.io/Tumblr-Style-Cog-
Spinners/cogs/cog03.svg" data-cog="cog03">
    <img class="loader-icon spinning-cog hidden" 
src="http://pasqualevitiello.github.io/Tumblr-Style-Cog-
Spinners/cogs/cog04.svg" data-cog="cog04">
    <img class="loader-icon spinning-cog hidden" 
 src="http://pasqualevitiello.github.io/Tumblr-Style-Cog-
Spinners/cogs/cog05.svg" data-cog="cog05">
    <img class="loader-icon spinning-cog hidden" 
src="http://pasqualevitiello.github.io/Tumblr-Style-Cog-
Spinners/cogs/cog06.svg" data-cog="cog06">
    <img class="loader-icon spinning-cog hidden" 
src="http://pasqualevitiello.github.io/Tumblr-Style-Cog-
Spinners/cogs/cog07.svg" data-cog="cog07">
    <img class="loader-icon spinning-cog hidden" 
src="http://pasqualevitiello.github.io/Tumblr-Style-Cog-
Spinners/cogs/cog08.svg" data-cog="cog08">
    <img class="loader-icon spinning-cog hidden" 
src="http://pasqualevitiello.github.io/Tumblr-Style-Cog-
Spinners/cogs/cog09.svg" data-cog="cog09">
    <img class="loader-icon spinning-cog hidden" 
src="http://pasqualevitiello.github.io/Tumblr-Style-Cog-
Spinners/cogs/cog10.svg" data-cog="cog10">
    <img class="loader-icon spinning-cog hidden" 
src="http://pasqualevitiello.github.io/Tumblr-Style-Cog-
Spinners/cogs/cog11.svg" data-cog="cog11">
    <img class="loader-icon spinning-cog hidden" 
src="http://pasqualevitiello.github.io/Tumblr-Style-Cog-
Spinners/cogs/cog12.svg" data-cog="cog12">
    <img class="loader-icon spinning-cog hidden" 
src="http://pasqualevitiello.github.io/Tumblr-Style-Cog-
Spinners/cogs/cog13.svg" data-cog="cog13">
    <img class="loader-icon spinning-cog hidden" 
src="http://pasqualevitiello.github.io/Tumblr-Style-Cog-
Spinners/cogs/cog14.svg" data-cog="cog14">
    <img class="loader-icon spinning-cog hidden" 
src="http://pasqualevitiello.github.io/Tumblr-Style-Cog-
Spinners/cogs/cog15.svg" data-cog="cog15">
    <img class="loader-icon spinning-cog hidden" 
src="http://pasqualevitiello.github.io/Tumblr-Style-Cog-
Spinners/cogs/cog16.svg" data-cog="cog16">
    <img class="loader-icon spinning-cog hidden" 
src="http://pasqualevitiello.github.io/Tumblr-Style-Cog-
Spinners/cogs/cog17.svg" data-cog="cog17">
    <img class="loader-icon spinning-cog hidden" 
src="http://pasqualevitiello.github.io/Tumblr-Style-Cog-
Spinners/cogs/cog18.svg" data-cog="cog18">
    <img class="loader-icon spinning-cog hidden" 
src="http://pasqualevitiello.github.io/Tumblr-Style-Cog-
Spinners/cogs/cog19.svg" data-cog="cog19">
    <img class="loader-icon spinning-cog hidden" 
src="http://pasqualevitiello.github.io/Tumblr-Style-Cog-
Spinners/cogs/cog20.svg" data-cog="cog20">
    <img class="loader-icon spinning-cog hidden" 
src="http://pasqualevitiello.github.io/Tumblr-Style-Cog-
Spinners/cogs/cog21.svg" data-cog="cog21">
    <img class="loader-icon spinning-cog hidden" 
src="http://pasqualevitiello.github.io/Tumblr-Style-Cog-
Spinners/cogs/cog22.svg" data-cog="cog22">
    <img class="loader-icon spinning-cog hidden" 
src="http://pasqualevitiello.github.io/Tumblr-Style-Cog-
Spinners/cogs/cog23.svg" data-cog="cog23">
    <img class="loader-icon spinning-cog hidden" 
src="http://pasqualevitiello.github.io/Tumblr-Style-Cog-
Spinners/cogs/cog24.svg" data-cog="cog24">
</div>
<div class="spacer1">
</div>
<div class="spacer1">
</div>
<p>
     hi I should vanish and come back after animation!!!!
</p>
</html>

css

*{
 margin:0;
 padding:0;

}

body{
  text-align:center; /*For IE6 Shenanigans*/
  font-size: 100%;
  font-family: "Courier New", Courier, monospace;
  font-weight: 900;
}

h1{
color: white;
overflow:hidden; /* older browsers */
}

.font1{
 font-family: 'Dorsa';
 letter-spacing: 1px;
top: 10px;
display:block;
position: absolute;
left: 5px;
width: 100%; /*makes the element 100%, to center it. */
}

img {
border-color: grey;
border-style: solid;
border-width: 1px;
}

#timeandate {
margin-top: 90px;
}

#timeandate2 {
position: relative;
margin-left: 5px;
}

#weather1 {
 position: absolute; /*makes it relative to the html element, (the first 
positioned element).*/
 width: 100%; /*makes the element 100%, to center it. */
top: 1700px;
right: -200px;
border-color: grey;
}

#weather2 {
 position: absolute; /*makes it relative to the html element, (the first 
positioned element).*/
 width: 100%; /*makes the element 100%, to center it. */
top: 1700px;
left: -150px;
border-color: grey;
border-weight: 2px;
}

#ShowText1{
position: relative;
overflow:hidden; /* older browsers */
 word-wrap: break-word;
padding-top: 100px;
max-width: 1000px;
font-size: 16px;
top: 250px;
line-height: 45px;
margin: 0 auto;
  font-family: "Courier New", Courier, monospace;
}


.spacer1 {
margin-top:20px;
}

.overlay-loader .loader-icon {
  position: absolute;
  top: 20%;
left: 43%;
z-index: 6;
  color: #42f498;
}

 .overlay-loader .loader-icon.spinning-cog {
 -webkit-animation: spinning-cog 1.3s infinite ease;
  -moz-animation: spinning-cog 1.3s infinite ease;
  -ms-animation: spinning-cog 1.3s infinite ease;
  -o-animation: spinning-cog 1.3s infinite ease;
  animation: spinning-cog 1.3s infinite ease;
background-color: #42f498;
}

@-webkit-keyframes spinning-cog {
  0% { -webkit-transform: rotate(0deg) scale(3)}
  20% { -webkit-transform: rotate(-45deg) scale(3)}
  100% { -webkit-transform: rotate(360deg) scale(3)}
}

@-moz-keyframes spinning-cog {
  0% { -moz-transform: rotate(0deg) scale(3)}
  20% { -moz-transform: rotate(-45deg) scale(3)}
  100% { -moz-transform: rotate(360deg) scale(3)}
}

@-o-keyframes spinning-cog {
  0% { -o-transform: rotate(0deg) scale(3)}
  20% { -o-transform: rotate(-45deg) scale(3)}
  100% { -o-transform: rotate(360deg) scale(3)}
}

@keyframes spinning-cog {
  0% { transform: rotate(0deg) scale(3)}
  20% { transform: rotate(-45deg) scale(3)}
  100% { transform: rotate(360deg) scale(3)}
}

@-webkit-keyframes shrinking-cog {
  0% { -webkit-transform: scale(12) }
  20% { -webkit-transform: scale(12.2) }
  100% { -webkit-transform: scale(1) }
}

@-moz-keyframes shrinking-cog {
  0% { -moz-transform: scale(12) }
  20% { -moz-transform: scale(12.2) }
  100% { -moz-transform: scale(1) }
}

@-o-keyframes shrinking-cog {
  0% { -o-transform: scale(12) }
  20% { -o-transform: scale(12.2) }
  100% { -o-transform: scale(1) }
}

@keyframes shrinking-cog {
  0% { transform: scale(12) }
  20% { transform: scale(12.2) }
  100% { transform: scale(0) }
}

.overlay-loader .loader-icon.shrinking-cog {
  -webkit-animation: shrinking-cog .3s 1 ease forwards;
  -moz-animation: shrinking-cog .3s 1 ease forwards;
  -ms-animation: shrinking-cog .3s 1 ease forwards;
  -o-animation: shrinking-cog .3s 1 ease forwards;
  animation: shrinking-cog .3s 1 ease forwards;
background-color: #42f498;
}

【问题讨论】：

要获得更好的答案，请正确缩进代码并尝试提供 jsfiddle。

标签： css animation spinner

【解决方案1】：

这是另一个更一般的答案。

如果您想在动画结束之前隐藏多个元素，然后显示它们，您可以执行以下操作：

给每个元素一个特殊的类，比如appear-later
定义类.appear-later { opacity: 0; }
使用 jQuery，在计时器到期后，从拥有它的元素中删除该类。

setTimeout(function () {
    $('.appear-later').removeClass('appear-later');
}, 2000);

另外，最好将 javascript 代码放在 html 标记之后。

Here's the pen

我使用color: red 代替opacity: 0 以便更显眼。

此外，在 Codepen 中，您可以通过转到设置 - Javascript - 快速添加来加载 jQuery

【讨论】：

嘿，这是一个非常有创意的解决方案！做得很好！非常感谢您的帮助先生。

【解决方案2】：

检查this。

一开始我将身体背景设置为黑色。

body { background: black; }

在你的计时器之后，将其更改为透明/白色。

setTimeout(function () {document.body.style.background = "transparent";}, 2300);

（你也可以使用 CSS 代替 js）。

【讨论】：

嘿，太棒了！谢谢@mikele。有一件事，你知道我是如何设置背景颜色的...更高的 z-index 吗？如果我有任何字体，或者任何其他颜色（不是黑色），它仍然会在动画结束之前出现。
你不能那样做。请给我看 jsfiddle 或 fork 我的 codepen，以便我可以尝试从那里修复它。
一种解决方案是给那些非黑色元素一个类，.black {color: black!important;}，然后在上面的setTimeout()，添加代码以从所有这些元素中删除该类。使用 jQuery，它看起来像这样：setTimeout(function () {document.body.style.background = "transparent"; $('.black').removeClass('black'); }, 2300);
感谢您的回复。这是一个代码笔。基本上，我试图让我的背景总是黑色的，动画背景也是黑色的。 codepen.io/wilsons88/pen/EXZqZQ 理想情况下，在动画加载完成之前根本看不到任何文本或任何内容。我注意到的其他事情，优先级要低得多，动画似乎在加载时改变了我的内容。但一次只做一件事。再次感谢米克尔！很抱歉在 html 中包含 javascript，当我尝试将其分离时，它不断破坏我的网站！但是，您的 javascript 是第一个 javascript 条目
我添加了另一个答案。核实。祝你好运。