Why not use ".animated.animeName" to define animation?

[manglobe]

I used it for the first time.And I try to use javascript to controlling all the "animated" class ,then I see all the animetions still works,because the animation is just defined by class "animeName". So why not use ".animated.animeName" to define animation?

[eltonmesquita]

I don't understand your point. Isn't it the way it works right now? Can you make yourself clear?

[manglobe]

@eltonmesquita Emmm……It's my wrong. There's something wrong with my explanation. ` \<div style="width:100px;height:100px;background:#ff4400" class="animated animated3 pulse">\<\/div>

\<div style="width:100px;height:100px;background:#000" class="animated animated4 flash ">\<\/div> `

Just like that. You know we always use several animation in one page . So use ['animated'+number] to defined "animation-duration" .

.animated3 { animation-duration: 3s; } .animated4 { animation-duration: 4s; } And then I try to controlling all the animation by "removeClass('animated)" & "addClass ('animated')" .

Of course it not works. Because the "animated3" defined a "animation-duration".

So I think , if the animation can be defined like this .animated.flash {   animation-name: flash;  } It will be More easily to control.

[eltonmesquita]

What you're trying to tell is that the animated shouldn't define a duration? Is that it? If that's the problem just use a selector with higher specificity like .parent-element > .animated.flash and set the duration in this selector.

[manglobe]

@eltonmesquita No, I means that, if I use "animate.css" as base style, because I need the animation curves., then I redefined the duration as I need. Just like this:

<link   href="animate.scss">
<style>
.time1{
  animation-duration: 0.1s;
}
.time2{
  animation-duration: 0.2s;
}
</style>

<div  class="animated time1 pulse"></div>

<div class="animated time2 flash "></div>

OK, these two div works well. But now I need to stop them at the same time. after event A, And then after event B I need to replay them at the same time. So I try to write this code to controller them :

window.addEventLisenter('event A', function(){
   $('div').removeClass('animated')
});
window.addEventLisenter('event B', function(){
   $('div').addClass('animated')
})

It not works, because the two div had a new duration. That's the problem, the className animated just defined the duration, but the duration is always be changed as project need. That means, the className animated is useless, set a default duration, into each animation className, is not different.

Now, 'animation.css' defined animation like this:

@keyframes flash {
  from, 50%, to {
    opacity: 1;
  }

  25%, 75% {
    opacity: 0;
  }
}

.flash {
  animation-name: flash;
}

But I think ,this will be more easily to control:

.animated.flash {
  animation-name: flash;
}

[eltonmesquita]

Actually, the .animated class is just a helper. You can and should use your own classes when needed. Animated.css is just a library, not a framework. It has an "use as want/need" approach.

I think that the default behavior is good enough for general use and I don't see the need for changing it. I'll close this as I don't think it'll make things better.

Feel free to reopen it if you have more arguments for it :D.