<carousel>
  <input type="radio" id="page1cb" checked name="pages" />
  <input type="radio" id="page2cb" name="pages" />
  <input type="radio" id="page3cb" name="pages" />
  <input type="radio" id="page4cb" name="pages" />
  <input type="radio" id="page5cb" name="pages" />
  <!-- page 1 -->
  <page id="page1">
    <div>Page One!</div>
    <label for="page2cb" title="Start"><b>START</b></label>
  </page>
  <!-- page 2 -->
  <page id="page2">
    <div>Page Two!</div>
    <label for="page3cb" title="Next"><b>NEXT</b></label>
  </page>
  <!-- page 3 -->
  <page id="page3">
    <div>Page Three!</div>
    <label for="page4cb" title="Next"><b>NEXT</b></label>
  </page>
  <!-- page 4 -->
  <page id="page4">
    <div>Page Four!</div>
    <label for="page5cb" title="Next"><b>NEXT</b></label>
  </page>
  <!-- page 5 -->
  <page id="page5">
    <div>Page Five!</div>
    <label for="page1cb" title="That's all folks!"><b>START AGAIN?</b></label>
  </page>
  <carousel>
carousel {
  width: 100%;
  text-align: center;
  font-family: Trebuchet MS;
  display: block;
  font-size: 6vmin;

  page {
    position: absolute;
    top: 2em;
    left: 0;
    width: 100%;
    transition: transform 0.5s;
    transform: scale(0);
    div {
      padding: 3em;
    }
    label {
      cursor: pointer;
      background: #d9ff4f;
      padding: 1em 2em;
    }
  }
  @for $i from 1 through 5 {
    #page#{$i}cb:checked ~ {
      #page#{$i} {
        transform: scale(1);
      }
    }
  }
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.