How to bound CSS3 animation to class - css

Question

I'm new to css so possible asking question in wrong way.
I have a simple pulsating animation. In CSS file is this code:
.pulsor_red {
-webkit-animation: pulsate .4s infinite linear;
-moz-animation: pulsate .4s infinite alternate;
-animation: pulsate .4s infinite alternate;
}
#-webkit-keyframes pulsate {
from { box-shadow: 0 0 8px red; }
to { box-shadow: 0 0 20px red; }
}
#-moz-keyframes pulsate {
from { box-shadow: 0 0 10px red; }
to { box-shadow: 0 0 20px red; }
}
#keyframes pulsate {
from { box-shadow: 0 0 10px red; }
to { box-shadow: 0 0 20px red; }
}
.pulsor_orange {
-webkit-animation: pulsate .4s infinite alternate;
-moz-animation: pulsate .4s infinite alternate;
-animation: pulsate .4s infinite alternate;
}
#-webkit-keyframes pulsate {
from { box-shadow: 0 0 8px #ffac00; }
to { box-shadow: 0 0 20px #ffac00; }
}
#-moz-keyframes pulsate {
from { box-shadow: 0 0 10px #ffac00; }
to { box-shadow: 0 0 20px #ffac00; }
}
#keyframes pulsate {
from { box-shadow: 0 0 10px #ffac00; }
to { box-shadow: 0 0 20px #ffac00; }
}
I would like to set class on one div pulsor_red and to other one pulsor_orange for one pulsating red and other orange (#ffac00).
How to do it?
click for jsfiddle

Answer 1

Just use unique names for both animations (notice the first and second):
div{
width:150px;
height:150px;
}
.pulsor_red {
-webkit-animation: first .4s infinite alternate;
-moz-animation: first .4s infinite alternate;
-animation: first .4s infinite alternate;
}
#-webkit-keyframes first {
from { box-shadow: 0 0 8px red; }
to { box-shadow: 0 0 20px red; }
}
#-moz-keyframes first {
from { box-shadow: 0 0 10px red; }
to { box-shadow: 0 0 20px red; }
}
#keyframes first {
from { box-shadow: 0 0 10px red; }
to { box-shadow: 0 0 20px red; }
}
.pulsor_orange {
-webkit-animation: second .4s infinite alternate;
-moz-animation: second .4s infinite alternate;
-animation: second .4s infinite alternate;
}
#-webkit-keyframes second {
from { box-shadow: 0 0 8px #ffac00; }
to { box-shadow: 0 0 20px #ffac00; }
}
#-moz-keyframes second {
from { box-shadow: 0 0 10px #ffac00; }
to { box-shadow: 0 0 20px #ffac00; }
}
#keyframes second {
from { box-shadow: 0 0 10px #ffac00; }
to { box-shadow: 0 0 20px #ffac00; }
}
<div class="pulsor_red">xxxxxx</div>
<div class="pulsor_orange">yyyyyy</div>