use half of a radial background as animation for background - html

Question

in this code snippet i have simple background for my container and i put a radial pattern on it i want to use half of transparent pattern and have animation and my problem is how can i use just half of the radial pattern correctly
like this :
css:
.container {
width: 600px;
height: 600px;
position: relative;
margin: 0 auto;
overflow: hidden;
background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PHJhZGlhbEdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjUwJSIgY3k9IjUwJSIgcj0iMTAwJSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzI4YTlkZCIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzBkNGU3NyIvPjwvcmFkaWFsR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
background: -moz-radial-gradient(#28a9dd, #0d4e77);
background: -webkit-radial-gradient(#28a9dd, #0d4e77);
background: radial-gradient(#28a9dd, #0d4e77);
}
.container:after {
content: "";
display: block;
position: absolute;
width: 850px;
height: 850px;
top: -125px;
left: -125px;
background: url(http://static.puzzlexperts.com/images/RadialBurst_bkgd.png) no-repeat top center, url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PHJhZGlhbEdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjUwJSIgY3k9IjUwJSIgcj0iMTAwJSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzI4YTlkZCIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzBkNGU3NyIvPjwvcmFkaWFsR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
background: url(http://static.puzzlexperts.com/images/RadialBurst_bkgd.png) no-repeat top center, -moz-radial-gradient(#28a9dd, #0d4e77);
background: url(http://static.puzzlexperts.com/images/RadialBurst_bkgd.png) no-repeat top center, -webkit-radial-gradient(#28a9dd, #0d4e77);
background: url(http://static.puzzlexperts.com/images/RadialBurst_bkgd.png) no-repeat top center, radial-gradient(#28a9dd, #0d4e77);
background-position: center;
background-blend-mode: screen;
-moz-animation: spin 20s linear infinite;
-webkit-animation: spin 20s linear infinite;
animation: spin 20s linear infinite;
}
#-moz-keyframes spin {
0% {
-moz-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-moz-transform: rotate(300deg);
transform: rotate(300deg);
}
}
#-webkit-keyframes spin {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(300deg);
transform: rotate(300deg);
}
}
#keyframes spin {
0% {
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-moz-transform: rotate(300deg);
-ms-transform: rotate(300deg);
-webkit-transform: rotate(300deg);
transform: rotate(300deg);
}
}
HTML:
<div class="container"></div>
https://codepen.io/flurrd/pen/gbYZGb

Answer 1

You need to resize the pseudo element (.container::after) to be more than twice as large as the container (4 times is easier to use), and set the rotation point to be around the base of the container. In addition, you need to resize the image to fit the new size of the pseudo-element (using background size).
Demo (pen)
.container {
width: 600px;
height: 600px;
position: relative;
margin: 0 auto;
overflow: hidden;
}
.container:after {
content: "";
display: block;
position: absolute;
width: 2400px;
height: 2400px;
top: -90%;
left: -150%;
background: url(http://static.puzzlexperts.com/images/RadialBurst_bkgd.png) no-repeat top center, radial-gradient(#28a9dd, #0d4e77);
background-position: center;
background-size: 2400px;
background-blend-mode: screen;
animation: spin 20s linear infinite;
}
#keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
<div class="container"></div>

Answer 2

Can you add something like this:
background: radial-gradient(rgba(0, 0, 0, 0)0%, rgba(0, 0, 0, 0)30%, #e66465 30%, #9198e5);
You can specify a percentage to remain transparent, in this case the radial gradient would be transparent to 30%, then from 30% a color.
You can just add this as an overlay and keep your other image behind...