CSS3 - Adding dynamic content triggers animation

CSS3 - Adding dynamic content triggers animation

I have animation defined in CSS3 for specific class which runs only one
time when that class is added to a element. The problem is when I add
dynamic content to their parent the animation runs for one more time.
Everytime, content is added the animation triggers. A list element which
is to be animated is automatically added to ul and it animates one time
(expected behaviour) whereas, the non-animable elements are added on JS
Event.
HTML:
<ul>
<li class="m"><div class="animable"></div></li>
<li class="m"><div class="animable animateNow"></div></li>
</ul>
When JS event occurs, a list element is added dynamically.
<ul>
<li class="m"><div class="animable"></div></li>
<li class="m"><div class="animable animateNow"></div></li>
<li class="m"><div class="animable"></div></li> // <- Sir! I am
innocent. I am newly added by JS. IDK, what is happening :/
</ul>
and the moment it is appended , the animable div triggers its animation
for one more time and so on for each added element.
Is this a bug ? How can I prevent it? I am using pure JS.
CSS:
.animable {
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
width:100%;
height:100%;
background:#ecf7d2;
}
.animateNow {
opacity:0;
animation-duration: 2s;
animation-name: animTrans;
-webkit-animation-duration: 2s;
-webkit-animation-name: animTrans;
}