クリック時にCSS要素を読み込みますか？

Question

ユーザーがボタンをクリックしたときに表示する「読み込み」要素があります。 JsFiddleを参照してください。

私は、ユーザーがボタンをクリックしたときにこのCSSアニメーションが読み込まれる可能性があるかどうかを判断しようとしています。私はCSSの読み込みを遅らせようとしましたが、それは私が何をしたのかを達成しません。クリック時にアニメーションを読み込むようにコードを変更するにはどうすればよいですか？

body { min-height: 100%; background: tomato } 
 
h1 { 
 
    position: absolute; 
 
    left: 50%; 
 
    margin-left: -1.9em; 
 
    color: beige; 
 
    font: 800 900% Baskerville, 'Palatino Linotype', Palatino, serif; 
 
} 
 
h1:before { 
 
    position: absolute; 
 
    overflow: hidden; 
 
    content: attr(data-content); 
 
    color:#34495e; 
 
    max-width: 4em; 
 
    -webkit-animation: loading 5s linear; 
 
} 
 
@-webkit-keyframes loading { 
 
    0% { 
 
    max-width : 0 
 
    } 
 
}

<h1 data-content="Loading Results">Loading Results</h1>

Answer 1

以下のコードを試すようにコードを変更するだけでなく、CSSアニメーションhttp://www.coding-dude.com/wp/web-design/css/5-min-css-animation-beginner-tutorial/に私の5分のイントロをチェックアウトすることができます

var loadButton = document.getElementById("load"); 
 
var title = document.getElementById("title"); 
 
loadButton.addEventListener("click",function(e){ 
 
    e.preventDefault(); 
 
    title.classList.toggle("loading"); 
 
})

body { min-height: 100%; background: tomato } 
 
h1 { 
 
    position: absolute; 
 
    left: 50%; 
 
    margin-left: -1.9em; 
 
    color: beige; 
 
    font: 800 900% Baskerville, 'Palatino Linotype', Palatino, serif; 
 
} 
 
h1:before { 
 
    position: absolute; 
 
    overflow: hidden; 
 
    content: attr(data-content); 
 
    color:#34495e; 
 
    max-width: 4em; 
 
} 
 

 
.loading:before{ 
 
    -webkit-animation: loading 5s linear; 
 
} 
 
@-webkit-keyframes loading { 
 
    0% { 
 
     max-width : 0 
 
    } 
 
}

<button id="load">start loading</button> 
 
<h1 id="title" data-content="Loading Results">Loading Results</h1>

Answer 2

あなたはこの

function addClass(){ 
 
document.getElementById("head").className = "load"; 
 
}

body { min-height: 100%; background: tomato } 
 
h1 { 
 
    position: absolute; 
 
    left: 50%; 
 
    margin-left: -1.9em; 
 
    color: beige; 
 
    font: 800 900% Baskerville, 'Palatino Linotype', Palatino, serif; 
 
} 
 
.load { 
 
    position: absolute; 
 
    overflow: hidden; 
 
    content: attr(data-content); 
 
    color:#34495e; 
 
    max-width: 4em; 
 
    -webkit-animation: loading 5s linear; 
 
} 
 
@-webkit-keyframes loading { 
 
    0% { 
 
     max-width : 0 
 
    } 
 
}

<h1 id="head" data-content="Loading Results">Loading Results</h1> 
 
<input type="button" value="click" onclick="addClass()">