試圖在相同的元素上設置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; 
 
\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>

有什麼建議？

來源

2017-07-08 NietzscheProgrammer

試試這個CSS 單獨使用逗號兩個動畫（，）

CSS

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

希望這有助於..

來源

2017-07-08 01:55:00

我也已經和仍然沒有工作:( – NietzscheProgrammer

試圖在相同的元素上設置2個動畫

回答

相關問題