CSS动画关键帧不起作用

Question

此上的渐变效果很好，但我无法使动画关键帧工作。我让它在http://codepen.io/Saucy/pen/peVwKR的codepen上运行，但无法在https://www.Sauc.io/test上运行。为什么？我现在花了6个小时才完成它仍然无法理解。

#main {

  justify-content: center;
  align-items: center;
  background: linear-gradient(
to bottom right,  
#2C3E50, #FD746C, 
#FF8235, #ffff1c, 
#92FE9D, #00C9FF, 
#a044ff, #e73827);
background-repeat: no-repeat;
background-size: 1000% 1000%;
-webkit-animation: gradient 240s ease infinite;
-moz-animation: gradient 240s ease infinite;
-ms-animation: gradient 240s ease infinite;
-o-animation: gradient 240s ease infinite;
-animation: gradient 240s ease infinite;


@-webkit-keyframes gradient
{
0%{background-position:0% 0%}
50%{background-position:100% 100%}
100%{background-position:0% 0%}
}

@-moz-keyframes gradient
{
0%{background-position:0% 0%}
50%{background-position:100% 100%}
100%{background-position:0% 0%}
}

@-ms-keyframes gradient
{  0%{background-position:0% 0%}
50%{background-position:100% 100%}
100%{background-position:0% 0%}
}

@keyframes gradient { 
0%{background-position:0% 0%}
50%{background-position:100% 100%}
100%{background-position:0% 0%}
}
 }