將動畫添加到動畫中的最終廣場

我以HTML/CSS的形式呈現此動畫。動畫中的最後一個方塊是綠色的，我試圖讓它每次在最後一次動畫循環之前出現綠色方塊。因爲在目前的狀態下，它總是出現在最後一個廣場！將動畫添加到動畫中的最終廣場

HTML：

<div class="loader"> 
    <div class="square" ></div> 
    <div class="square"></div> 
    <div class="square last"></div> 
    <div class="square clear"></div> 
    <div class="square"></div> 
    <div class="square last"></div> 
    <div class="square clear"></div> 
    <div class="square "></div> 
    <div class="square last"></div> 
</div>

CSS

@-webkit-keyframes enter { 
    0% { 
    opacity: 0; 
    top: -10px; 
    } 
    5% { 
    opacity: 1; 
    top: 0px; 
    } 
    50.9% { 
    opacity: 1; 
    top: 0px; 
    } 
    55.9% { 
    opacity: 0; 
    top: 10px; 
    } 
} 
@keyframes enter { 
    0% { 
    opacity: 0; 
    top: -10px; 
    } 
    5% { 
    opacity: 1; 
    top: 0px; 
    } 
    50.9% { 
    opacity: 1; 
    top: 0px; 
    } 
    55.9% { 
    opacity: 0; 
    top: 10px; 
    } 
} 
@-moz-keyframes enter { 
    0% { 
    opacity: 0; 
    top: -10px; 
    } 
    5% { 
    opacity: 1; 
    top: 0px; 
    } 
    50.9% { 
    opacity: 1; 
    top: 0px; 
    } 
    55.9% { 
    opacity: 0; 
    top: 10px; 
    } 
} 
body { 
    background: #1fbeca; 
} 

* { 
    margin: 0; 
} 

.loader { 
    position: absolute; 
    left: 50%; 
    top: 50%; 
    margin-left: -27.5px; 
    margin-top: -27.5px; 
} 

.square { 
    background: white; 
    width: 15px; 
    height: 15px; 
    float: left; 
    top: -10px; 
    margin-right: 5px; 
    margin-top: 5px; 
    position: relative; 
    opacity: 0; 
    -webkit-animation: enter 6s infinite; 
    animation: enter 6s infinite; 
} 

.enter { 
    top: 0px; 
    opacity: 1; 
} 

.square:nth-child(1) { 
    -webkit-animation-delay: 1.8s; 
    -moz-animation-delay: 1.8s; 
    animation-delay: 1.8s; 
} 

.square:nth-child(2) { 
    -webkit-animation-delay: 2.1s; 
    -moz-animation-delay: 2.1s; 
    animation-delay: 2.1s; 
} 

.square:nth-child(3) { 
    -webkit-animation-delay: 2.4s; 
    -moz-animation-delay: 2.4s; 
    animation-delay: 2.4s; 
    background: #fdc96f; 
} 

.square:nth-child(4) { 
    -webkit-animation-delay: 0.9s; 
    -moz-animation-delay: 0.9s; 
    animation-delay: 0.9s; 
} 

.square:nth-child(5) { 
    -webkit-animation-delay: 1.2s; 
    -moz-animation-delay: 1.2s; 
    animation-delay: 1.2s; 
} 

.square:nth-child(6) { 
    -webkit-animation-delay: 1.5s; 
    -moz-animation-delay: 1.5s; 
    animation-delay: 1.5s; 
} 

.square:nth-child(8) { 
    -webkit-animation-delay: 0.3s; 
    -moz-animation-delay: 0.3s; 
    animation-delay: 0.3s; 
} 

.square:nth-child(9) { 
    -webkit-animation-delay: 0.6s; 
    -moz-animation-delay: 0.6s; 
    animation-delay: 0.6s; 
} 

.clear { 
    clear: both; 
} 

.last { 
    margin-right: 0; 
}

這裏有一個鏈接：https://codepen.io/dghez/pen/Czuqn

來源

2017-10-29 Daniel joe

爲了有充分的時間 '進入' 動畫運行彩色方塊移動位置，創建一個新的動畫是「進入」動畫長度的9倍。

這個長度的原因是9個方格中的每一個需要爲「進入」動畫的全部運行設置動畫。

9格x 6s = 54s。

對於此動畫的1/9（約爲11％），我們更改了正方形的顏色。

@keyframes squarecolor { 
    0%, 11.1% { 
    background-color: #fdc96f; 
    } 
    11.2%, 100% { 
    background-color: white; 
    } 
}

然後，將該動畫應用到每個方塊，就像'enter'動畫一樣。儘管如此，每個方格應該以6秒爲單位逐步延遲。

這是link to an updated version of your Codepen。

來源

2017-10-29 05:19:51

您可以通過使用第二個動畫來實現該效果，該動畫將動畫的整個循環一次變爲黃色。

第二個動畫在所有9個方塊（6s * 9 = 54s）運行第一個動畫後循環，每個方塊延遲到某個6s的間隔以與相應的應該是黃色的循環對齊。

@-webkit-keyframes enter { 
 
    0% { 
 
    opacity: 0; 
 
    top: -10px; 
 
    } 
 
    5% { 
 
    opacity: 1; 
 
    top: 0px; 
 
    } 
 
    50.9% { 
 
    opacity: 1; 
 
    top: 0px; 
 
    } 
 
    55.9% { 
 
    opacity: 0; 
 
    top: 10px; 
 
    } 
 
} 
 
@keyframes enter { 
 
    0% { 
 
    opacity: 0; 
 
    top: -10px; 
 
    } 
 
    5% { 
 
    opacity: 1; 
 
    top: 0px; 
 
    } 
 
    50.9% { 
 
    opacity: 1; 
 
    top: 0px; 
 
    } 
 
    55.9% { 
 
    opacity: 0; 
 
    top: 10px; 
 
    } 
 
} 
 
@-webkit-keyframes change { 
 
    0% { 
 
    background: #fdc96f; 
 
    } 
 
    11.11% { /* one 6s frame in a 54s animation (6/54 = .1111) */ 
 
    background: #fdc96f; 
 
    } 
 
    11.12% { 
 
    background: white; 
 
    } 
 
    100% { 
 
    background: white; 
 
    } 
 
} 
 
@keyframes change { 
 
    0% { 
 
    background: #fdc96f; 
 
    } 
 
    11.11% { 
 
    background: #fdc96f; 
 
    } 
 
    11.12% { 
 
    background: white; 
 
    } 
 
    100% { 
 
    background: white; 
 
    } 
 
} 
 
body { 
 
    background: #1fbeca; 
 
} 
 

 
* { 
 
    margin: 0; 
 
} 
 

 
.loader { 
 
    position: absolute; 
 
    left: 50%; 
 
    top: 50%; 
 
    margin-left: -27.5px; 
 
    margin-top: -27.5px; 
 
} 
 

 
.square { 
 
    background: white; 
 
    width: 15px; 
 
    height: 15px; 
 
    float: left; 
 
    top: -10px; 
 
    margin-right: 5px; 
 
    margin-top: 5px; 
 
    position: relative; 
 
    opacity: 0; 
 
} 
 

 
.enter { 
 
    top: 0px; 
 
    opacity: 1; 
 
} 
 

 
.square:nth-child(1) { 
 
    -webkit-animation: enter 6s 1.8s infinite, change 54s 12s infinite; 
 
    animation: enter 6s 1.8s infinite, change 54s 12s infinite; 
 
} 
 

 
.square:nth-child(2) { 
 
    -webkit-animation: enter 6s 2.1s infinite, change 54s 6s infinite; 
 
    animation: enter 6s 2.1s infinite, change 54s 6s infinite; 
 
} 
 

 
.square:nth-child(3) { 
 
    -webkit-animation: enter 6s 2.4s infinite, change 54s infinite; 
 
    animation: enter 6s 2.4s infinite, change 54s infinite; 
 
} 
 

 
.square:nth-child(4) { 
 
    -webkit-animation: enter 6s 0.9s infinite, change 54s 30s infinite; 
 
    animation: enter 6s 0.9s infinite, change 54s 30s infinite; 
 
} 
 

 
.square:nth-child(5) { 
 
    -webkit-animation: enter 6s 1.2s infinite, change 54s 24s infinite; 
 
    animation: enter 6s 1.2s infinite, change 54s 24s infinite; 
 
} 
 

 
.square:nth-child(6) { 
 
    -webkit-animation: enter 6s 1.5s infinite, change 54s 18s infinite; 
 
    animation: enter 6s 1.5s infinite, change 54s 18s infinite; 
 
} 
 

 
.square:nth-child(7) { 
 
    -webkit-animation: enter 6s infinite, change 54s 48s infinite; 
 
    animation: enter 6s infinite, change 54s 48s infinite; 
 
} 
 

 
.square:nth-child(8) { 
 
    -webkit-animation: enter 6s 0.3s infinite, change 54s 42s infinite; 
 
    animation: enter 6s 0.3s infinite, change 54s 42s infinite; 
 
} 
 

 
.square:nth-child(9) { 
 
    -webkit-animation: enter 6s 0.6s infinite, change 54s 36s infinite; 
 
    animation: enter 6s 0.6s infinite, change 54s 36s infinite; 
 
} 
 

 
.clear { 
 
    clear: both; 
 
} 
 

 
.last { 
 
    margin-right: 0; 
 
}

<div class="loader"> 
 
    <div class="square"></div> 
 
    <div class="square"></div> 
 
    <div class="square last"></div> 
 
    <div class="square clear"></div> 
 
    <div class="square"></div> 
 
    <div class="square last"></div> 
 
    <div class="square clear"></div> 
 
    <div class="square "></div> 
 
    <div class="square last"></div> 
 
</div>

筆：https://codepen.io/straker/pen/mqdzMw

來源

2017-10-29 05:20:08

將動畫添加到動畫中的最終廣場

回答

相關問題