CODEWITHSUNDEEP
csscss-animations
GrahamTheDev
GrahamTheDev

Reputation: 24825

Is it possible to keep a gradient Stationary while rotating

I am attempting to rotate a 'cog' using CSS (an SVG cog).

However I was wondering if it was possible to keep the gradient at a constant angle so that it appears more realistic.

e.g. cog rotates 20deg using CSS transforms but the gradient stays at 0deg so it looks like there is a constant light source.

Upvotes: 1

Views: 426

Answers (3)

GrahamTheDev
GrahamTheDev

Reputation: 24825

So it turns out that you can't rotate the gradient in an SVG with CSS (or at least I couldn't find it if you can).

Instead using native SVG rotation on the gradient was the solution.

They key is to add the following within the <linearGradient> 

    <animateTransform
  attributeName="gradientTransform"
  type="rotate"
  from="0 250 250"
  to="360 250 250"
  dur="10s"
  repeatCount="indefinite"/>  


body {
  display: flex;
  align-items: center;
  justify-content: center;
}

.cog {
  width: 500px;
  height: 500px;
  animation: rotation-0 10s linear infinite;
}


@keyframes rotation-0 {
  0% {
    transform: rotate(1deg);
  }
  100% {
    transform: rotate(-359deg);
  }
}
<svg class="cog" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 44 44" xml:space="preserve">
  <defs>
    <linearGradient id="grad" x1="0%" y1="0%" x2="0%" y2="100%" gradientUnits="userSpaceOnUse">
      <stop offset="20%" style="stop-color:#28b493;stop-opacity:1" />
      <stop offset="80%" style="stop-color:#007c9b;stop-opacity:1" />
      <animateTransform
  attributeName="gradientTransform"
  type="rotate"
  from="0 22 22"
  to="360 22 22"
  dur="10s"
  repeatCount="indefinite"/>
    </linearGradient>
  </defs>

	<path fill="url(#grad)" d="M44,24.707v-5.5l-6.574-2.738c-0.184-0.516-0.377-1.015-0.613-1.505l2.656-6.606l-3.891-3.889l-6.549,2.696   c-0.498-0.242-1.008-0.445-1.535-0.634L24.707,0h-5.5l-2.718,6.509c-0.548,0.194-1.075,0.397-1.595,0.646L8.357,4.528L4.469,8.416   l2.665,6.478c-0.259,0.532-0.467,1.074-0.667,1.633L0,19.293v5.5l6.472,2.697c0.199,0.559,0.413,1.1,0.67,1.633l-2.615,6.52   l3.888,3.889l6.494-2.676c0.522,0.248,1.054,0.447,1.601,0.635L19.293,44h5.5l2.721-6.543c0.523-0.193,1.039-0.396,1.533-0.633   l6.596,2.643l3.889-3.889l-2.709-6.562c0.232-0.494,0.418-0.994,0.602-1.504L44,24.707z M21.957,31.583   c-5.289,0-9.582-4.292-9.582-9.583s4.293-9.583,9.582-9.583c5.292,0,9.583,4.293,9.583,9.583S27.248,31.583,21.957,31.583z"/>
</svg>

Upvotes: 1

Yosef Tukachinsky
Yosef Tukachinsky

Reputation: 5895

You can just animate the background angle from 360 to 0 while animation the rotation from 0 to 360. it will make the background stay static. for make available animation of background angle use CSS.registerProperty.

As here:

CSS.registerProperty({
  name: '--deg',
  syntax: '<angle>',
  inherits: false,
  initialValue: '0deg',
});
:root {
  --deg: 0deg;
}
body {
width: 100%;
height: 100vh;
margin:0;
padding:0;
overflow:hidden;
}
#d {
overflow:hidden;
  width: 100px;
  height: 100px;
  position: absolute;
  right:0;
  left:0;
  bottom:0;
  top:0;
  margin:auto;
  background: linear-gradient(var(--deg), red, yellow, green);
  transform-origin: center center;
  animation: rotation 2s linear infinite;
}

@keyframes rotation {
  0% {transform: rotate(0deg); --deg: 360deg}
  100% {transform: rotate(360deg); --deg: 0deg}
}
<div id="d"></div>

Upvotes: 1

alirizvi19
alirizvi19

Reputation: 167

.box-cirlce {width:100%; position:relative;}

.cog-small {
    width: 80px;
    height: 80px;
    position: absolute;
    top: 0;
    left: 0;
    background: url('https://ladaworld.com/299-large_default/differential-24-splines-side-gear.jpg') center center no-repeat;
    background-size: contain;
}

#cog {
	-webkit-animation: cog 5s infinite;			
	-moz-animation: cog 5s infinite;
	-ms-animation: cog 5s infinite; 			
	animation: cog 5s infinite;
	-webkit-animation-timing-function: linear;	
	-moz-animation-timing-function: linear;		
	-ms-animation-timing-function: linear;
	animation-timing-function: linear	
}
@-webkit-keyframes cog {
100%{ -webkit-transform: rotate(360deg)}
}
@-moz-keyframes cog {
100%{ -webkit-transform: rotate(360deg)}
}
@-ms-keyframes cog {
100%{ -webkit-transform: rotate(360deg)}
}
@keyframes cog {
100%{ 
	-webkit-transform: rotate(360deg);
	-moz-transform: rotate(360deg);
	-ms-transform: rotate(360deg);
	transform: rotate(360deg)
}
}
<div class="box-cirlce"><div class="cog-small" id="cog"></div></div>

Upvotes: 0

Related Questions