rotating gradient background no js

Question

i'm experimenting with css gradient animations right now, but i just cant figure out how to get a rotating gradient on a steady div square.

here is my fiddle

.navigation__logo__wrap {
  position: fixed;
  left:0;top:0;right:0;bottom:0;
  overflow: visible;
  z-index: -1;
}
.navigation__logo {
  position:absolute;
  left:100px;top:100px;width:100%;height:100%;
  padding:0;margin:0;
  height: 50px;
  width: 50px;
  background: rgba(246,100,55,1);
  background: -moz-linear-gradient(45deg, rgba(246,100,55,1) 0%, rgba(246,100,55,1) 19%, rgba(244,53,47,1) 37%, rgba(246,100,55,1) 37%, rgba(244,53,47,1) 56%, rgba(246,101,57,1) 92%, rgba(246,101,57,1) 100%);
  background: -webkit-gradient(left bottom, right top, color-stop(0%, rgba(246,100,55,1)), color-stop(19%, rgba(246,100,55,1)), color-stop(37%, rgba(244,53,47,1)), color-stop(37%, rgba(246,100,55,1)), color-stop(56%, rgba(244,53,47,1)), color-stop(92%, rgba(246,101,57,1)), color-stop(100%, rgba(246,101,57,1)));
  background: -webkit-linear-gradient(45deg, rgba(246,100,55,1) 0%, rgba(246,100,55,1) 19%, rgba(244,53,47,1) 37%, rgba(246,100,55,1) 37%, rgba(244,53,47,1) 56%, rgba(246,101,57,1) 92%, rgba(246,101,57,1) 100%);
  background: -o-linear-gradient(45deg, rgba(246,100,55,1) 0%, rgba(246,100,55,1) 19%, rgba(244,53,47,1) 37%, rgba(246,100,55,1) 37%, rgba(244,53,47,1) 56%, rgba(246,101,57,1) 92%, rgba(246,101,57,1) 100%);
  background: -ms-linear-gradient(45deg, rgba(246,100,55,1) 0%, rgba(246,100,55,1) 19%, rgba(244,53,47,1) 37%, rgba(246,100,55,1) 37%, rgba(244,53,47,1) 56%, rgba(246,101,57,1) 92%, rgba(246,101,57,1) 100%);
  background: linear-gradient(45deg, rgba(246,100,55,1) 0%, rgba(246,100,55,1) 19%, rgba(244,53,47,1) 37%, rgba(246,100,55,1) 37%, rgba(244,53,47,1) 56%, rgba(246,101,57,1) 92%, rgba(246,101,57,1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f66437', endColorstr='#f66539', GradientType=1 );
    animation: spin 5s linear infinite;
    -moz-animation: spin 5s linear infinite;
    -webkit-animation: spin 5s linear infinite;
    -ms-animation: spin 5s linear infinite;
}

@keyframes spin {
 from { transform: scale3d(2,2,1) rotateZ(0deg);  }
 to { transform: scale3d(2,2,1) rotateZ(360deg); }
}
@-moz-keyframes spin {
 from { -moz-transform: scale3d(2,2,1) rotateZ(0deg); }
 to { -moz-transform: scale3d(2,2,1) rotateZ(360deg); }
}
@-webkit-keyframes spin {
 from { -webkit-transform: scale3d(2,2,1) rotateZ(0deg); }
 to { -webkit-transform: scale3d(2,2,1) rotateZ(360deg); }
}
@-ms-keyframes spin {
 from { -ms-transform: scale3d(2,2,1) rotateZ(0deg); }
 to { -ms-transform: scale3d(2,2,1) rotateZ(360deg); }
}

<div class="navigation__logo__wrap">
  <div class="navigation__logo"></div>
</div>

as you can see at the moment the whole square is rotating with the background. but i want the square div to be steady and just the background to rotate to get that glancy effect. i dont want to use any js.

hope you can help me, thanks in advance!

Answer 1

You can set the wrapper div to overflow: hidden; and make it smaller than the rotating child:

.navigation__logo__wrap {
  position: fixed;
  left: 50px;
  top: 50px;
  right: 0;
  bottom: 0;
  height: 50px;
  width: 50px;
  overflow: hidden;
}
.navigation__logo {
  position: absolute;
  padding: 0;
  margin: 0;
  height: 50px;
  width: 50px;
  background: rgba(246, 100, 55, 1);
  background: -moz-linear-gradient(45deg, rgba(246, 100, 55, 1) 0%, rgba(246, 100, 55, 1) 19%, rgba(244, 53, 47, 1) 37%, rgba(246, 100, 55, 1) 37%, rgba(244, 53, 47, 1) 56%, rgba(246, 101, 57, 1) 92%, rgba(246, 101, 57, 1) 100%);
  background: -webkit-gradient(left bottom, right top, color-stop(0%, rgba(246, 100, 55, 1)), color-stop(19%, rgba(246, 100, 55, 1)), color-stop(37%, rgba(244, 53, 47, 1)), color-stop(37%, rgba(246, 100, 55, 1)), color-stop(56%, rgba(244, 53, 47, 1)), color-stop(92%, rgba(246, 101, 57, 1)), color-stop(100%, rgba(246, 101, 57, 1)));
  background: -webkit-linear-gradient(45deg, rgba(246, 100, 55, 1) 0%, rgba(246, 100, 55, 1) 19%, rgba(244, 53, 47, 1) 37%, rgba(246, 100, 55, 1) 37%, rgba(244, 53, 47, 1) 56%, rgba(246, 101, 57, 1) 92%, rgba(246, 101, 57, 1) 100%);
  background: -o-linear-gradient(45deg, rgba(246, 100, 55, 1) 0%, rgba(246, 100, 55, 1) 19%, rgba(244, 53, 47, 1) 37%, rgba(246, 100, 55, 1) 37%, rgba(244, 53, 47, 1) 56%, rgba(246, 101, 57, 1) 92%, rgba(246, 101, 57, 1) 100%);
  background: -ms-linear-gradient(45deg, rgba(246, 100, 55, 1) 0%, rgba(246, 100, 55, 1) 19%, rgba(244, 53, 47, 1) 37%, rgba(246, 100, 55, 1) 37%, rgba(244, 53, 47, 1) 56%, rgba(246, 101, 57, 1) 92%, rgba(246, 101, 57, 1) 100%);
  background: linear-gradient(45deg, rgba(246, 100, 55, 1) 0%, rgba(246, 100, 55, 1) 19%, rgba(244, 53, 47, 1) 37%, rgba(246, 100, 55, 1) 37%, rgba(244, 53, 47, 1) 56%, rgba(246, 101, 57, 1) 92%, rgba(246, 101, 57, 1) 100%);
  filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#f66437', endColorstr='#f66539', GradientType=1);
  animation: spin 5s linear infinite;
  -moz-animation: spin 5s linear infinite;
  -webkit-animation: spin 5s linear infinite;
  -ms-animation: spin 5s linear infinite;
}
@keyframes spin {
  from {
    transform: scale3d(2, 2, 1) rotateZ(0deg);
  }
  to {
    transform: scale3d(2, 2, 1) rotateZ(360deg);
  }
}
@-moz-keyframes spin {
  from {
    -moz-transform: scale3d(2, 2, 1) rotateZ(0deg);
  }
  to {
    -moz-transform: scale3d(2, 2, 1) rotateZ(360deg);
  }
}
@-webkit-keyframes spin {
  from {
    -webkit-transform: scale3d(2, 2, 1) rotateZ(0deg);
  }
  to {
    -webkit-transform: scale3d(2, 2, 1) rotateZ(360deg);
  }
}
@-ms-keyframes spin {
  from {
    -ms-transform: scale3d(2, 2, 1) rotateZ(0deg);
  }
  to {
    -ms-transform: scale3d(2, 2, 1) rotateZ(360deg);
  }
}

<div class="navigation__logo__wrap">
  <div class="navigation__logo"></div>
</div>