Template:Stonecutting/styles.css

/* layout wrapper */
.stonecutting-carousel { position:relative; }

/* every frame stacked on top of each other */
.sc-frame{
  position:absolute; top:0; right:0; bottom:0; left:0;
  opacity:0; visibility:hidden;
  animation-name:sc-cycle;
  animation-timing-function:step-start;  /* instant flip, no fade */
  animation-iteration-count:infinite;
}

/* single-recipe carousels never animate */
.sc-static{
  opacity:1 !important;
  visibility:visible !important;
  animation:none !important;
}

/* same key-frames for every invocation
   0-49.999 %  → visible
   50-100 %    → hidden
*/
@keyframes sc-cycle{
  0%      {opacity:1; visibility:visible;}
  49.999% {opacity:1; visibility:visible;}
  50%     {opacity:0; visibility:hidden;}
  100%    {opacity:0; visibility:hidden;}
}

/* slot positioning */
.sc-slot{
  position:absolute;
  width:32px; height:32px;
}