CSS Rotation Effects

See the Pen Create Element Timer, Loop, Second Class by Brandon Brule (@brandonbrule) on CodePen

CSS transform: rotate() - animation keyframe

It started with three classes on 100+ elements

.box for spacing, width and height - and two alternating classes (.first/.second) that referenced two different keyframe animations, rotate 0 to 360deg, and 360deg to 0 reversing the rotation.

See the Pen Alternating Animation Classes by Brandon Brule (@brandonbrule) on CodePen

/* Equal sized elements 25 x 25 */
.box{ 
  margin:0;
  display:block;
  float:left;
  width:25px;
  height:25px;
}
/* Call rotate-right animation keyframes */
.first{
  -webkit-animation: rotate-right 1.5s linear infinite normal;
  background: #C8C8A9;
}
/* Call rotate-left animation keyframes */
.second{
  -webkit-animation: rotate-left 1.5s linear infinite normal;
  background: #F9CDAD;
}
/* Animation - Full 360deg rotation*/
@-webkit-keyframes rotate-right {
  from{
    -webkit-transform: rotate(0deg);
  }
  to{
    -webkit-transform: rotate(360deg);
  }
}
@-webkit-keyframes rotate-left {
  from{
    -webkit-transform: rotate(360deg);
  }
  to{
    -webkit-transform: rotate(1deg);
  }
}

Using Borders and negative margin

Using 2 different coloured borders instead of a background colour and using a negative margin of -5px the css starts to look a little more interesting.

See the Pen Alternating Animation Classes by Brandon Brule (@brandonbrule) on CodePen

/* Overlap box with negative margin */
.box{ 
  margin:-5px;
}
/* border instead of background-color */
.first{
  border: 1px solid #333;
}
.second{
  border: 1px solid #777;
}

See the Pen CSS Rotating Boxes by Brandon Brule (@brandonbrule) on CodePen

/* 4 colours for every 25 elements */
.colour-1{ background: rgba(105,210,231,0.15); }
.colour-2{ background: rgba(167,219,216,0.15); }
.colour-3{ background:rgba(243,134,48,0.15); }
.colour-4{ background:rgba(250,105,0,0.05); }
/* Percentage based negative margin/measurements */
.box{
  border:1px solid #fff;
  margin:0 -5%;
  height:30%;
  width:10%;
  float:left;
}

With percentaged based negative margins and width/height and float:left styles the css begins to stack the animation. Taking advantage of the alpha in rgba - the same colour creates a visual stack. Each set of 25 elements has a colour, 4 colours in total. The layered effect comes from the alpha and negative margin.

Adding a timer to delay animation

The next step was creating a timer function that would create the elements, one after the other, delaying the start of the animation for each element.

The top animation is a result of the timer. The rest is the same, alternating rotations for every second element.

Unfortunately setInterval is quite resource heavy, I can only link to them here. I promise the effects are more interesting with the timer.

• http://codepen.io/brandonbrule/pen/LqsiF
• http://codepen.io/brandonbrule/pen/wymEG
• http://codepen.io/brandonbrule/pen/HgfFe

If you've ever needed a script that creates hundreds of elements with alternating classes, one after the other have I got the js for you. Feel free to use these in any way.