css - 如何将CSS3动画绑定(bind)到类

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>