Template:Stonecutting/styles.css: Difference between revisions
Jump to navigation
Jump to search
(Created page with ".stonecutting-carousel { position: relative; } .sc-frame { position: absolute; top: 0; →instead of inset:0: right: 0; bottom: 0; left: 0; opacity: 0; animation: sc-cycle 12s linear infinite; } .sc-frame:nth-child(1) { animation-delay: 0s; } .sc-frame:nth-child(2) { animation-delay: 4s; } .sc-frame:nth-child(3) { animation-delay: 8s; } →add more nth-child rules if you expect >3 outputs: @keyframes sc-cycle { 0%,20% { opacity: 1; } 30%...") |
No edit summary |
||
| (11 intermediate revisions by the same user not shown) | |||
| Line 1: | Line 1: | ||
.stonecutting-carousel { | /* layout wrapper */ | ||
position: | .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; | |||
animation: | |||
} | } | ||
/* same key-frames for every invocation | |||
. | 0-49.999 % → visible | ||
50-100 % → hidden | |||
*/ | |||
@keyframes sc-cycle{ | |||
@keyframes sc-cycle { | 0% {opacity:1; visibility:visible;} | ||
0% | 49.999% {opacity:1; visibility:visible;} | ||
50% {opacity:0; visibility:hidden;} | |||
100% {opacity:0; visibility:hidden;} | |||
} | } | ||
/* slot | /* slot positioning */ | ||
.sc-slot { | .sc-slot{ | ||
position: absolute; | position:absolute; | ||
width: 32px; | width:32px; height:32px; | ||
} | } | ||
Latest revision as of 04:32, 14 June 2025
/* 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;
}