クリック時にCSSキーフレームを実行する

ボタンをクリックしたときにメッセージが表示されるようにしようとしています。私は「GO！」したいゲームの開始を意味するためにフェードイン/フェードアウトするが、開始ボタンがクリックされたときのみである。私は現時点でjqueryと、マウスクリックとスクリーンタップの組み合わせを与える教師からの別のライブラリを使用して、javascriptを試しています。クリック時にCSSキーフレームを実行する

ボタンをクリックしたときにアニメーションクラスを追加するように設定しましたが、アニメーションが再生されません。最初からアニメーションクラスを追加するとアニメーションは再生されますが、ボタンがクリックされたときは再生されません。 JavaScriptを追加すると何が問題になったのですか？基本的なクリックボタンとテキストをどのようにフェードイン/アウトすることができますか？

<script type="text/javascript"> 
$(document).ready(function() { 
    $("#addFrogBut").onTap(function() { 
    $("#goText").addClass(".goAnim"); 
    }); 
}); 
</script> 

<head> 
#addFrogBut { 
    position: fixed; 
    bottom: 20px; 
    font-family: fantasy; 
    font-size: 32px; 
    left: 20px; 
    text-transform: uppercase; 
    text-shadow: -1px 0 white, 0 1px white, 1px 0 white, 0 -1px white; 
    padding: 2px 18px; 
    background-color: white; 
    border-radius: 12px; 
    text-align: center; 
    cursor: pointer; 
} 
#goText { 
    position: fixed; 
    bottom: 50vh; 
    left: 42.5vw; 
    color: rgba(43, 96, 162, 0); 
    font-family: fantasy; 
    font-size: 60px; 
    text-transform: uppercase; 
} 
.goAnim { 
    animation-name: go; 
    animation-duration: 3s; 
    animation-iteration-count: 1; 
} 
@keyframes go { 
    0% { 
    color: rgba(43, 96, 162, 0); 
    } 
    50% { 
    color: rgba(0, 0, 0, 1); 
    } 
    100% { 
    color: rgba(43, 96, 162, 0); 
    } 
} 
</head> 

<body> 
<div id='addFrogBut'>Add a Frog</div> 
<div id='goText'>GO!</div> 
</body>

出典

2016-05-09 Musa

ここでドットを削除する 'addClass（"。goAnim "）'クラス名を指定するだけです –

CSSコードが '