Как создать не плавную анимацию?

Question

[copal]

Есть квадрат, на который нужно наложить анимацию продолжительностью 4s.
1s виден
2s не виден
3s виден
4s не виден

При этом не иметь плавных переходов между состояниями. Как такое сделать? Есть какое-то специальное свойство?

Answer 1

[Дмитрий Кравченко]

animation steps

codepen.io/imdmitrykravchenko/pen/OMQrZW

Answer 2

[Sanan Yuzb]

@keyframes myAnimation {
                      0% {
                        opacity: 1;
                      }
                      25% {
                        opacity: 0;
                      }
                      50% {
                        opacity: 1;
                      }
                      75% {
                        opacity: 0;
                      }
                      100% {
                        opacity: 1;
                      }
                    }

Comments

[copal]

Вы хоть бы код проверили перед ответом..