尝试在相同元素上设置2个动画

Question

我正在尝试设置2个不同的动画，一个首先，然后另一个。

正如您可以在此Codepen和下面的代码片段中看到的，第一个动画在页面加载时触发，它将图标重新排列到其原始位置。另一个动画是脉冲动画，它必须反映在图标的边框上。

看一下代码：

​

.eight-box {
  position: relative;
  display: block;
  margin: 1em auto;
  width: 16em;
  height: 16em;
  font-family: sans-serif;
  font-size: 20px;
  border: 1px solid;
  border-radius: 50%;
}
.fig-8 {
  display: block;
  position: absolute;
  color: #fff;
  width: 2em;
  height: 2em;
  line-height: 2;
  text-align: center;
  font-weight: bold;
  font-smoothing: antialiased;
	transition: all .5s linear;
  overflow: hidden;
  z-index: 5;
}

.col-1 {
	background: #1abc9c;
}
.col-2 {
	background: #9b59b6;
}
.col-3 {
	background: #27ae60;
}
.col-4 {
	background: #2c3e50;
}

.pos-1 {
	top: 30%;
	left: 93.75%;
}
.pos-2 {
	top: 66.25%;
	left: 88.75%;
}
.pos-3 {
	top: 72.92%;
	right: 83.125%;
}
.pos-4 {
	top: 19.58%;
	right: 88.75%;
}

.fig-8 {
    animation: pulse-special 1s 1s 1 alternate backwards, upDown 1s;
    border-radius: 50%;
}
@keyframes pulse-special {
    0% {
        -webkit-box-shadow: 0 0 0 0 rgba(0, 115, 207, .9);
    }
    70% {
        -webkit-box-shadow: 0 0 0 10px rgba(0, 115, 207, 0);
    }
    100% {
        -webkit-box-shadow: 0 0 0 0 rgba(0, 115, 207, 0);
    }
}
@keyframes pulse-special {
    0% {
        -moz-box-shadow: 0 0 0 0 rgba(0, 115, 207, .9);
        box-shadow: 0 0 0 0 rgba(0, 115, 207, .9);
    }
    70% {
        -moz-box-shadow: 0 0 0 10px rgba(0, 115, 207, 0);
        box-shadow: 0 0 0 10px rgba(0, 115, 207, 0);
    }
    100% {
        -moz-box-shadow: 0 0 0 0 rgba(0, 115, 207, 0);
        box-shadow: 0 0 0 0 rgba(0, 115, 207, 0);
    }
}

@keyframes upDown {
    from { margin-top: -30px; }
    to { margin-top: 0; }
}

<div class="eight-box">
  <div class="fig-8 col-1 pos-1">1</div>
  <div class="fig-8 col-2 pos-2">2</div>
  <div class="fig-8 col-3 pos-3">3</div>
  <div class="fig-8 col-4 pos-4">4</div>
</div>

​

有什么建议吗？

Answer 1

试试这个CSS用逗号(，)分隔两个动画

CSS

.fig-8 {
       animation: upDown 1s 1s 1 alternate backwards, 
         pulse-special 1s 1s 1 alternate backwards;
}

希望这能帮上忙..