0
2つの異なるアニメーションを設定しようとしています。同じ要素に2つのアニメーションを設定しようとしています
このCodepenと下のスニペットに示すように、最初のアニメーションは、アイコンを元の位置に再配置するページの読み込み時に発生します。 もう1つのアニメーションは、アイコンの境界線に反映されなければならないパルスアニメーションです。コードで
ルック：
.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;
\t transition: all .5s linear;
overflow: hidden;
z-index: 5;
}
.col-1 {
\t background: #1abc9c;
}
.col-2 {
\t background: #9b59b6;
}
.col-3 {
\t background: #27ae60;
}
.col-4 {
\t background: #2c3e50;
}
.pos-1 {
\t top: 30%;
\t left: 93.75%;
}
.pos-2 {
\t top: 66.25%;
\t left: 88.75%;
}
.pos-3 {
\t top: 72.92%;
\t right: 83.125%;
}
.pos-4 {
\t top: 19.58%;
\t 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>任意の提案ですか？このことができます
は、私はすでに、まだ動作していないということでした:( – NietzscheProgrammer