闪烁效果
?> 背景知识：
animation-direction
animation-direction属性接受的值共有四个，为了你能从视觉上直接理解其作用，我以下图一段从#FFFFFF变化到#b4a078并循环三次的动画为例，展示了这四个值各自对动画的作用效果。
<script v-pre type="text/x-template" id="blink">
<style>
main {
width: 100%; height: 329px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.main p, .main span {
width: 388px;
padding: 3px 10px;
border-radius: 5px;
font-size: 14px;
}
p:nth-of-type(1) {
background-color: #f4f4f5;
color: #909399;
animation: 1s blink-normal infinite step-end;
}
p:nth-of-type(2) {
background-color: #fdf6ec;
color: #e6a23c;
animation: .5s blink-alternate infinite;
animation-direction: alternate;
}
p:nth-of-type(3) {
background: #fef0f0;
color: #f56c6c;
animation: .5s blink-alternate infinite;
animation-direction: alternate-reverse;
}
@keyframes blink-normal {
50% {
color: transparent;
}
}
@keyframes blink-alternate {
to {
color: transparent;
}
}
</style>
animation-direction: 默认normalinfo~
animation-direction: 反向alternatewarning~ warning~
animation-direction: 反向交替alternate-reverseerror~ error~ error~
<script>
</script>
</script>
一切的过度皆应该由动画来完成
浏览器支持
<iframe src="https://caniuse.bitsofco.de/embed/index.html?feat=css-animation&periods=future_1,current,past_1,past_2,past_3&accessible-colours=false" frameborder="0" width="100%" height="436px"></iframe>
