Problema al animar elementos al aparecer en pantalla (se animan todos a la vez)

[EdwingO]

Buen día, les agradecía si me colaboran con saber como hago para solucionar que con unos elementos que quiero animar al aparecer en pantalla en base a una clase, no se me animen todos los elementos a la vez como si fuesen un mismo elemento (la animación consiste simplemente en pasar de un “opacity: 0;” a un “opacity: 1;”) - es decir, lo que sucede es que al aparecer en pantalla el 1er elemento que tiene la clase con el “opacity: 0;” (el 1ro de los elementos que jquery les va a asignar la clase con el “opacity: 1;”) el resto que tienen dicha clase también se animan antes de aparecer en pantalla, es decir jqery también les asigna la clase con el “opacity: 1;” antes de llegar a estar en pantalla; para hacerme entender mejor les comparto en codepen el código; o si conocen un mejor método de lograr lo que necesito sin plugins me ayudarían mucho, de nuevo muchas gracias. [URL="http://codepen.io/EdwingGit/pen/RRRgZq"]http://codepen.io/EdwingGit/pen/RRRgZq[/URL]