[Solved] What is wrong with this CSS background syntax?

Question

The syntax indeed is incorrect. It should be radial-gradient(circle at right center, #ffbb11 0px, #dd6600 100%). This is also incorrect in the CodePen, and once you fix it, the animation looks different (it has a ‘Click here’ call-to-action when you hover it). It is not the core issue, though.

The reason why the animation doesn’t work at all in your version, is because the animation properties need a -webkit- prefix in Chrome.

In the CodePen, -prefix-free is used, which is why it works. It is a library that automatically adds the prefixed version of the CSS properties.
CodePen can also use Autoprefixer (another such library) or neither. Once you select ‘neither’, you’ll see that the CodePen example also doesn’t work anymore, because the (S)CSS doesn’t contain the required prefixed version for the CSS attributes.

So, the solution: either use a library too, or add the required prefixed attributes for Chrome (and maybe other browsers too).

Accepted Answer

The syntax indeed is incorrect. It should be radial-gradient(circle at right center, #ffbb11 0px, #dd6600 100%). This is also incorrect in the CodePen, and once you fix it, the animation looks different (it has a ‘Click here’ call-to-action when you hover it). It is not the core issue, though.

The reason why the animation doesn’t work at all in your version, is because the animation properties need a -webkit- prefix in Chrome.

In the CodePen, -prefix-free is used, which is why it works. It is a library that automatically adds the prefixed version of the CSS properties.
CodePen can also use Autoprefixer (another such library) or neither. Once you select ‘neither’, you’ll see that the CodePen example also doesn’t work anymore, because the (S)CSS doesn’t contain the required prefixed version for the CSS attributes.

So, the solution: either use a library too, or add the required prefixed attributes for Chrome (and maybe other browsers too).