How to create non-smooth animation?

Question

css

There is a square that needs to be animated for 4s.
1s is visible
2s is not visible
3s is visible
4s is not visible
At the same time, do not have smooth transitions between states. How to do this? Is there any special property?

Answer 1

animation steps
codepen.io/imdmitrykravchenko/pen/OMQrZW

Answer 2

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