?> 背景知识：:point_right: 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>一切的过度皆应该由动画来完成