jQueryでアニメーションをトリガーする方法は？

Question

イメージをアニメーション化するCSSコードがありますが、jQueryを使用してアニメーションをトリガーするボタンが必要です。

これは私のCSSとHTMLのコードですが、それは動作しません：

私はそれが動作するようにする必要がありますどのような変更

jQuery.noConflict(); 
 
$(document).ready(function() { 
 
    $(".animar").click(function() { 
 
    $('#img4').addClass('uno'); 
 
    }); 
 
});

#img4:hover { 
 
    animation-name: uno; 
 
    animation-duration: 7s; 
 
} 
 

 
@keyframes uno { 
 
    20% { 
 
    left: 80px; 
 
    } 
 
    50% { 
 
    left: 190px; 
 
    } 
 
    70% { 
 
    left: 220px 
 
    } 
 
    100% { 
 
    left: 350px; 
 
    } 
 
}

<div id="movimiento"> 
 
    <img src="imagenes/kangura.png" class="img-responsive" id="img4"> 
 

 
    <img src="imagenes/corazon.png" class="img-responsive" id="img5"> 
 
    <button class="animar">Entregar Corazón</button> 
 
</div>

？

Answer 1

unoをjQueryに追加していますが、.unoに対応するCSSルールがありません。

私はこの作業を表示するには1と最低限のスタイルを追加しました：JON-uleis @

$(document).ready(function() { 
 
    $(".animar").click(function() { 
 
    $('#img4').addClass('uno'); 
 
    }); 
 
});

#img4 { 
 
    position: absolute; 
 
    top: 30px; 
 
} 
 

 
.uno { 
 
    animation-name: uno; 
 
    animation-duration: 7s; 
 
} 
 

 
@keyframes uno { 
 
    20% { 
 
    left: 80px; 
 
    } 
 
    50% { 
 
    left: 190px; 
 
    } 
 
    70% { 
 
    left: 220px 
 
    } 
 
    100% { 
 
    left: 350px; 
 
    } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div id="movimiento"> 
 
    <img src="http://placehold.it/200x200" class="img-responsive" id="img4"> 
 

 
    <button class="animar">Entregar Corazón</button> 
 
</div>