试图在相同的元素上设置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

<i class="fa fa-expand" aria-hidden="true"></i>

希望这会有所帮助..