CSS animation not being applied to div - css

Question

Looking at Animista.net I would like to write some custom CSS animations. So I thought I would try by using one of their examples, and then tweaking it for my personal use.
.box {
width: 100px;
height: 100px;
background-color: red;
-webkit-animation: fade-in 1.2s steps(80, end) both;
-moz-animation: fade-in 1.2s steps(80, end) both;
animation: fade-in 1.2s steps(80, end) both;
}
<div class="box"></div>
But I cannot get the animations to work at all.
What am I doing wrong?

Answer 1

Here you are. You must add animation.
#keyframes example {
0% {background-color:red; left:0px; top:0px;}
25% {background-color:yellow; left:200px; top:0px;}
50% {background-color:blue; left:200px; top:200px;}
75% {background-color:green; left:0px; top:200px;}
100% {background-color:red; left:0px; top:0px;}
}
Codepen

Answer 2

You also need to define the #keyframes to make the animation work. See the attached snippet.
.box {
width: 100px;
height: 100px;
background-color: red;
-webkit-animation: fade-in 1.2s steps(80, end) both;
-moz-animation: fade-in 1.2s steps(80, end) both;
animation: fade-in 1.2s steps(80, end) both;
}
#-webkit-keyframes fade-in {
from {
opacity: 0;
}
to {
opacity: 1.0;
}
}
#-moz-keyframes fade-in {
from {
opacity: 0;
}
to {
opacity: 1.0;
}
}
#-o-keyframes fade-in {
from {
opacity: 0;
}
to {
opacity: 1.0;
}
}
#keyframes fade-in {
from {
opacity: 0;
}
to {
opacity: 1.0;
}
}
<div class="box"></div>