cssアニメーションはとても便利なのですが、アニメーションをいつ発動させるかは、CSSだけでは操作できません。そこで要素が画面内に入ったことをシンプルに判定したい。そんな時は「inview.js」の出番です。
使用方法の基本も簡単です。
（1）CSSの@keyframesでアニメーションをつくる。
（2）(1)のアニメーションを適用するCSSクラスをつくる。
（2）inview.jsで、可視領域に入ったら（2）のクラスを付与する設定をする。
基本的には、これだけです。
注意点は、アニメーションさせる要素の初期状態のCSS設定です。opacityで消しておくなどの処置が必要です。elseでclassをremoveすることで、何度でも可視領域に入る際にアニメーションさせることができます。classをremoveした後のopacityも、初期状態に戻す意味合いですので、アニメーションの種類によっては適したCSSをつけてあげれば良いです。