ページの残りの部分からCSSアニメーションを分離する

CSSの読み込みアニメーションがうまくいきました。誰かが解決策を知っているのだろうかと疑問に思っています。ページの残りの部分から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; 
}

出典

2017-06-18 Masteryogurt

をクイック追加正しくコードをインデントとjsfiddleを提供してみてください。 – jack

もう1つ、より一般的な回答です。

あなたは最初のアニメーションまで、複数の要素を非表示にする場合は、それらを表示し、その後、終わって、次のことが可能です。

それらの要素の特別なクラスのそれぞれに与える、appear-later
は、クラスを定義しますと言います.appear-later { opacity: 0; }
jQueryでは、タイマーの期限が切れた後、そのクラスを持つ要素からそのクラスを削除します。

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

また、あなたのHTMLマークアップの後、あなたのjavascriptのコードを配置することをお勧めします。

Here's the pen

もっと見えるようにするためにcolor: red代わりにopacity: 0を用います。 Javascriptを - - また

、Codepenで、[設定]に移動してjQueryのをロードすることができ、より良い回答について

出典

2017-06-18 23:33:06 jack

これは本当に創造的な解決策ですね！うまくやった！助けてくれてありがとう。 – Masteryogurt

あなたは大歓迎です:) – jack

チェックthis。

最初はボディの背景を黒に設定しました。

body { background: black; }

タイマーの後、透明/白色に変更します。

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

（jsの代わりにCSSを使用することもできます）。

出典

2017-06-18 12:46:44 jack

ねえ、それは素晴らしいです！ありがとう@mikele。一つのこと、私は背景色を設定して....より高いz-インデックスを持つ方法を知っていますか？もし私がフォントを持っていたり、黒以外の色になっていたりしても、それはアニメーションが終わる前にまだ現れています。 – Masteryogurt

それはできません。 jsfiddleを表示するか、私のコードをフォークして、そこから修正しようとすることができます。 – jack

解決策の1つは、黒でない要素にクラスを与えることです。 '.black {color：black！重要な;} 'それで、上記の' setTimeout（） 'に、それらのすべての要素からそのクラスを削除するコードを追加してください。 jQueryでは、次のようになります： 'setTimeout（function（）{document.body.style.background =" transparent "; $（ 'black'）。removeClass（ 'black'）;}、2300）;' – jack

ページの残りの部分からCSSアニメーションを分離する

答えて

関連する問題