?> Background：:point_right: animation-direction
The animation-direction Property has four values can be accepted. For the purpose of understanding its effect visiually and precisely, this document takes the example of the animation that changes from #FFFFFF to #b4a078 and loop three times, which present the different effects of the different four values. See the following diagram.
<script v-pre type="text/x-template" id="blink_tlp"> <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: default
normalinfo~
animation-direction: Reversealternatewarning~ warning~
animation-direction: Reverse alternatingalternate-reverseerror~ error~ error~
<script> </script> </script><iframe width="100%" height="436px" frameborder="0" src="https://caniuse.bitsofco.de/embed/index.html?feat=css-animation&periods=future_1,current,past_1,past_2,past_3&accessible-colours=false"> </iframe>All the transitions should be animated.