Как связать анимацию CSS3 с классом

Question

Я новичок в css, так что задаю вопрос неправильно. У меня простая пульсирующая анимация. В файле CSS этот код:

.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; } 
} 

Я хотел бы установить класс на одном DIV pulsor_red и другой один pulsor_orange для одного пульсирующего красного и другой оранжевый (# ffac00). Как это сделать?

click for jsfiddle

Answer 1

Просто используйте уникальные имена для обеих анимаций (обратите внимание first и 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>