What is wrong with this CSS background syntax? - css

Question

At this link: [http://codepen.io/FelixKiunke/pen/nvDcj][1] you can see that this guy made a nice circle that finishing filling its edges up every 10 seconds. This is what I want to duplicate.
I have copied the compiled CSS as well as the HTML from this page and put it in some local files. When I open my page with this on it, Chrome tells me that the background CSS elements have invalid syntax and so the circle does not show up at all.
Why is the syntax invalid in my copied code but not on the site?
/*
NOTE ABOUT THE FORK:
This demonstrates the use of radial gradients on the Pie Spinner by HugoGiraudel (http://codepen.io/HugoGiraudel/pen/BHEwo).
Most of the code is unchanged, too make my changes clear I have removed the previous comments.
I added radial gradients (see the color change on hover) and a demonstration for the responsive size (click), and a little "Click me" pseudo element.
*/
* {
box-sizing: border-box;
}
.wrapper {
width: 250px;
height: 250px;
margin: 10px auto;
position: relative;
background: white;
/*The bigger size at click:*/
transition: width 0.5s, height 0.5s;
}
.wrapper.big {
width: 400px;
height: 400px;
}
.pie {
width: 50%;
height: 100%;
transform-origin: 100% 50%;
position: absolute;
/*
Here comes the radial gradient.
Note that it has to have the alignment "left center" for the .filler,
and "right center" for the .spinner!
*/
/*CHROME SAYS THE NEXT LINE IS INVALID*/
background: radial-gradient(left center, circle, #00ccff 0px, #000088 100%);
/* The borders mustn't be transparent, that looks really ugly! */
border: 20px solid #024;
}
.spinner {
border-radius: 100% 0 0 100% / 50% 0 0 50%;
z-index: 200;
/*CHROME SAYS THE NEXT LINE IS INVALID*/
background: radial-gradient(right center, circle, #00ccff 0px, #000088 100%);
border-right: none;
animation: rota 10s linear infinite;
}
.spinner::after {
position: absolute;
height: 20px;
top: 0px;
right: 0px;
content: "Click me!";
transform: rotate(270deg);
transform-origin: 100% 100%;
color: white;
font: 16px/20px sans-serif;
}
.wrapper:hover .pie {
border-color: #620;
}
.wrapper:hover .filler {
/*CHROME SAYS THE NEXT LINE IS INVALID*/
background: radial-gradient(left center, circle, #ffbb11 0px, #dd6600 100%);
}
.wrapper:hover .spinner {
background: radial-gradient(right center, circle, #ffbb11 0px, #dd6600 100%);
}
.filler {
border-radius: 0 100% 100% 0 / 0 50% 50% 0;
left: 50%;
opacity: 0;
z-index: 100;
animation: fill 10s steps(1, end) infinite;
border-left: none;
}
.mask {
width: 50%;
height: 100%;
position: absolute;
background: inherit;
opacity: 1;
z-index: 300;
animation: mask 10s steps(1, end) infinite;
}
#keyframes rota {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
#keyframes mask {
0% {
opacity: 1;
}
50%, 100% {
opacity: 0;
}
}
#keyframes fill {
0% {
opacity: 0;
}
50%, 100% {
opacity: 1;
}
}
<div class="wrapper">
<div class="pie spinner"></div>
<div class="pie filler"></div>
<div class="mask"></div>
</div>​
Update
Here is the updated (and working) CSS:
/Spinner/
/*
NOTE ABOUT THE FORK:
This demonstrates the use of radial gradients on the Pie Spinner by HugoGiraudel (http://codepen.io/HugoGiraudel/pen/BHEwo).
Most of the code is unchanged, too make my changes clear I have removed the previous comments.
I added radial gradients (see the color change on hover) and a demonstration for the responsive size (click), and a little "Click me" pseudo element.
*/
* {
box-sizing: border-box;
}
.wrapper {
width: 250px;
height: 250px;
margin: 10px auto;
position: relative;
background: white;
/*The bigger size at click:*/
transition: width 0.5s, height 0.5s;
}
.wrapper.big {
width: 400px;
height: 400px;
}
.pie {
width: 50%;
height: 100%;
transform-origin: 100% 50%;
position: absolute;
/*
Here comes the radial gradient.
Note that it has to have the alignment "left center" for the .filler,
and "right center" for the .spinner!
*/
background: -webkit-gradient(circle at left center, #00ccff 0px, #000088 100%);
background: -webkit-linear-gradient(circle at left center, #00ccff 0px, #000088 100%);
background: -moz-linear-gradient(circle at left center, #00ccff 0px, #000088 100%);
background: -ms-linear-gradient(circle at left center, #00ccff 0px, #000088 100%);
background: -o-linear-gradient(circle at left center, #00ccff 0px, #000088 100%);
background: radial-gradient(circle at left center, #00ccff 0px, #000088 100%);
/* The borders mustn't be transparent, that looks really ugly! */
border: 20px solid #024;
}
.spinner {
border-radius: 100% 0 0 100% / 50% 0 0 50%;
z-index: 200;
background: -webkit-gradient(circle at right center, #00ccff 0px, #000088 100%);
background: -webkit-linear-gradient(circle at right center, #00ccff 0px, #000088 100%);
background: -moz-linear-gradient(circle at right center, #00ccff 0px, #000088 100%);
background: -ms-linear-gradient(circle at right center, #00ccff 0px, #000088 100%);
background: -o-linear-gradient(circle at right center, #00ccff 0px, #000088 100%);
background: radial-gradient(circle at right center, #00ccff 0px, #000088 100%);
border-right: none;
-webkit-animation: rota 10s linear infinite;
-moz-animation: rota 10s linear infinite;
-o-animation: rota 10s linear infinite;
animation: rota 10s linear infinite;
}
.spinner::after {
position: absolute;
height: 20px;
top: 0px;
right: 0px;
content: "Click me!";
transform: rotate(270deg);
transform-origin: 100% 100%;
color: white;
font: 16px/20px sans-serif;
}
.wrapper:hover .pie {
border-color: #620;
}
.wrapper:hover .filler {
background: -webkit-gradient(circle at left center, #ffbb11 0px, #dd6600 100%);
background: -webkit-linear-gradient(circle at left center, #ffbb11 0px, #dd6600 100%);
background: -moz-linear-gradient(circle at left center, #ffbb11 0px, #dd6600 100%);
background: -ms-linear-gradient(circle at left center, #ffbb11 0px, #dd6600 100%);
background: -o-linear-gradient(circle at left center, #ffbb11 0px, #dd6600 100%);
background: radial-gradient(circle at left center, #ffbb11 0px, #dd6600 100%);
}
.wrapper:hover .spinner {
background: -webkit-gradient(circle at right center, #ffbb11 0px, #dd6600 100%);
background: -webkit-linear-gradient(circle at right center, #ffbb11 0px, #dd6600 100%);
background: -moz-linear-gradient(circle at right center, #ffbb11 0px, #dd6600 100%);
background: -ms-linear-gradient(circle at right center, #ffbb11 0px, #dd6600 100%);
background: -o-linear-gradient(circle at right center, #ffbb11 0px, #dd6600 100%);
background: radial-gradient(circle at right center, #ffbb11 0px, #dd6600 100%);
}
.filler {
border-radius: 0 100% 100% 0 / 0 50% 50% 0;
left: 50%;
opacity: 0;
z-index: 100;
-webkit-animation: fill 10s steps(1, end) infinite;
-moz-animation: fill 10s steps(1, end) infinite;
-o-animation: fill 10s steps(1, end) infinite;
animation: fill 10s steps(1, end) infinite;
border-left: none;
}
.mask {
width: 50%;
height: 100%;
position: absolute;
background: inherit;
opacity: 1;
z-index: 300;
-webkit-animation: mask 10s steps(1, end) infinite;
-moz-animation: mask 10s steps(1, end) infinite;
-o-animation: mask 10s steps(1, end) infinite;
animation: mask 10s steps(1, end) infinite;
}
#-webkit-keyframes rota {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
#-moz-keyframes rota {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
#-o-keyframes rota {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
#keyframes rota {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
#-webkit-keyframes mask {
0% {
opacity: 1;
}
50%, 100% {
opacity: 0;
}
}
#-moz-keyframes mask {
0% {
opacity: 1;
}
50%, 100% {
opacity: 0;
}
}
#-o-keyframes mask {
0% {
opacity: 1;
}
50%, 100% {
opacity: 0;
}
}
#keyframes mask {
0% {
opacity: 1;
}
50%, 100% {
opacity: 0;
}
}
#-webkit-keyframes fill {
0% {
opacity: 0;
}
50%, 100% {
opacity: 1;
}
}
#-moz-keyframes fill {
0% {
opacity: 0;
}
50%, 100% {
opacity: 1;
}
}
#-o-keyframes fill {
0% {
opacity: 0;
}
50%, 100% {
opacity: 1;
}
}
#keyframes fill {
0% {
opacity: 0;
}
50%, 100% {
opacity: 1;
}
}
[1]: http://codepen.io/FelixKiunke/pen/nvDcj

Answer 1

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).