将动画添加到动画中的最终广场

我以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

将动画添加到动画中的最终广场

回答

相关问题