CSSでクラスを追加してページ上でアニメーション化するにはどうすればいいですか？

Question

私は、互いに反対側の2つの画像を中央からアニメートしようとしています。

途中にテキストが1つ、左端が1つ、右端がもう1つです。

.image.is-visible { 
    left: 0%; 
    -webkit-transform: translateY(0%); 
    -moz-transform: translateY(0%); 
    -ms-transform: translateY(0%); 
    -o-transform: translateY(0%); 
    transform: translateY(0%); 
} 
.image { 
    background-position: right; 
    -webkit-transform: translateX(45%); 
    -moz-transform: translateX(45%); 
    -ms-transform: translateX(45%); 
    -o-transform: translateX(45%); 
    transform: translateX(45%); 

私は私のjsFiddleで私のtransform: translateY(0%);を持っているが、どのように実行します。

は、私が（例えば、このようなもの）になりましたis-visible CSS属性いくつかのウェブサイト上で見てきましたjsFiddle

を見ますクラスを追加します（例：is-visible）。

Answer 1

だから、あなただけの 例をスクロールしながらクラスはたぶん

を追加する必要があるときに定義する必要がありますクラスは、おそらくjQueryの

https://api.jquery.com/addclass/

によって行われます：

http://codepen.io/LukeD1uk/pen/zvGQZN

またはドキュメントがロードされている場合

$(document).ready(function() { 
    $(".someclass").addClass("is-visible"); 
});