jqueryを使用して私のウェブサイトの負荷でアニメーションを動作させることができません

Question

私の問題は、私のアニメーションを開始するクラスを追加するjQuery関数を得ることができないことです。私はそれを働かせるために多くの異なった方法を試しました、それらのどれも働いていません！

jQueryの

$(document).ready(function(){ 
    window.onload = function render(){ 
    $('.title .sub-title').addClass('render'); 
} 
}); 

CSS

.render { 
    animation-name: render; 
    animation-duration: 2s; 
    animation-timing-function: ease-in-out; 
} 

@keyframes render { 
    0% { transform: translateX(-800px); } 
    100% { transform: translateX(0px); } 
} 

HTML

<div class="site-header-title-wrapper"> 
    <h1 class="title">Template 1</h1><!--Need To add animation 
    <h4 class="sub-title">- Here is a Template Slogan -</h4><!--Need To add animation to--> 
</div> 

誰かに助けてもらえますか？

非常に有益です！

Answer 1

は、以下のことを試してください：あなたの例では

$(document).ready(function(){ 
    $('.title, .sub-title').addClass('render'); 
}); 

コードが.title要素内にネスト.sub-title要素を目標としています。あなたのCSSセレクタにカンマを含めてこれを修正する必要があります。

Answer 2

.sub-titleクラスはコメントアウトされています。試してみてください：

<div class="site-header-title-wrapper"> 
    <h1 class="title">Template 1</h1> 
    <h4 class="sub-title">- Here is a Template Slogan -</h4> 
</div>