Обмеження на три спалахи в секунду

дивитись опис критерію у WCAG 2.1

Неприпустима кількість блимань

Вимога не виконується. Протягом 1 секунди відбувається більше 3 блимань.

<style>
@keyframes anima_bad {
    0% { background-color: yellow; transform: scale(0.6); }
    25% { background-color: aqua; transform: scale(0.7); }
    50% { background-color: yellow; transform: scale(0.8); }
    75% { background-color: aqua; transform: scale(0.9); }
}

.anima_bad {
    animation-name: anima_bad;
    animation-duration: 1s;
    animation-iteration-count: infinite;
    animation-timing-function: steps(1);
}
</style>
<div class="anima anima_bad"></div>

Допустима кількість блимань

Вимога виконується. Протягом 1 секунди відбувається не більше 3 блимань.

<style>
@keyframes anima_good {
    0% { background-color: yellow; transform: scale(0.6); }
    50% { background-color: aqua; transform: scale(0.9); }
}

.anima_good {
    animation-name: anima_good;
    animation-duration: 1.2s;
    animation-iteration-count: infinite;
    animation-timing-function: steps(1);
}
</style>
<div class="anima anima_good"></div>

Червоні спалахи

Краще уникати червоних спалахів, тобто використання насиченого червоного кольору, який змінює інші кольори.
Червоний колір має більший потенціал у викликанні судом та інших фізіологічних реакцій.

<style>
@keyframes anima_red {
    0% { background-color: grey; transform: scale(0.6); }
    50% { background-color: red; transform: scale(0.9); }
}

.anima_red_1 {
    animation-name: anima_red;
    animation-duration: 1.2s;
    animation-iteration-count: infinite;
    animation-timing-function: steps(1);
}

.anima_red_2 {
    animation-name: anima_red;
    animation-duration: 1.2s;
    animation-iteration-count: infinite;
}
</style>
<div class="flex_row_sta_sta">
    <div class="anima anima_red_1 mr25"></div>
    <div class="anima anima_red_2"></div>
</div>