Where was the example?

For example your question was about using steps (1 and) in the line of animation

Why was this wrong?

You were telling the browser two different things at the same time

@keyframes: You are saying to run the animation in 4 steps (0%, 33%, 66%, 100%), slowly

With steps (1, end): You are saying to run the animation slowly, taking it straight to the last step (100%) in one go

Chrome and Firefox are smart, they do their job despite the error. But Safari browser strictly follows CSS rules, so it gets confused by the strange command and does not apply the opacity: 0 property properly

What was the situation?

The situation was very simple: remove steps(1, end) from the line with the animation. What makes the animation run slowly and every browser understands it as normal

.pixel-load {
  background: #f00; /* Lal (Red) Box */
  display: block;
  height: 400px;
  width: 300px;
}

.pixel-load__preload {
  background: #00f; /* Neela (Blue) Box */
  display: block;
  height: 100%;
  width: 100%;
}

/* Yahan hum ne masla theek kar diya hai */
.pixel-load.loaded .pixel-load__preload {
    /* Animation slow kar di hai taake asar nazar aaye */
    animation: loaded 2s 1s linear both;
}

@keyframes loaded {
    0% {
        scale: 1.6;
    }
    33% {
        scale: 1.2;
    }
    66% {
        scale: 1;
    }
    100% {
        opacity: 0;
        scale: 1;
        z-index: 1;
    }
}

This is a common issue that occurs frequently in Safari browser. I have tested your code myself and found the solution.