CSS Animations basic tests

dabblet.css

/* CSS Animations basic tests */
/* via default (on page load), :hover and :checked */
@keyframes startsame {from {background-color: rgba(245,163,163,.7);}}
@keyframes endsame {to {background-color: rgba(163, 245, 163, .7);}}
@keyframes startonly {from {background-color: #ccc;}}
@keyframes endonly {to {background-color: #ccc;}}
@keyframes bothsame {
  from {background-color: rgba(245,163,163,.7);}
  to {background-color: rgba(163, 245, 163, .7);}
}
/* on page load */
.pageload .box {background-color: rgba(163, 245, 163, .7); border-color: #ddd;}
.pageload .startsame {animation: startsame 3s;}
.pageload .endsame {animation: endsame 3s;}
.pageload .bothsame {animation: bothsame 3s;}
.pageload .startonly {animation: startonly 3s;}
.pageload .endonly {animation: endonly 3s;}
/* on :hover */
.hover:hover .box {background-color: rgba(163, 245, 163, .7); border-color: #ddd; border-color: #ddd;}
.hover:hover .startsame {animation: startsame 3s;}
.hover:hover .endsame {animation: endsame 3s;}
.hover:hover .bothsame {animation: bothsame 3s;}
.hover:hover .startonly {animation: startonly 3s;}
.hover:hover .endonly {animation: endonly 3s;}
/* when :checkbox button checked */
input[type="checkbox"]:checked ~ .box {background-color: rgba(163, 245, 163, .7);}
input[type="checkbox"]:checked ~ .startsame {animation: startsame 3s;}
input[type="checkbox"]:checked ~ .endsame {animation: endsame 3s;}
input[type="checkbox"]:checked ~ .bothsame {animation: bothsame 3s;}
input[type="checkbox"]:checked ~ .startonly {animation: startonly 3s;}
input[type="checkbox"]:checked ~ .endonly {animation: endonly 3s;}

.wrapper {
  float: left;
  width: 148px;
  margin: 48px 24px 24px;
}
.checkbox {margin-top: 20px;}
.box {
  width: 124px;
  margin: 12px;
  border: 3px solid #999;
  border-radius: 5px;
  padding: 3px;
  line-height: 1.5;
  background-color: rgba(245,163,163,.5);
}
input[type="checkbox"] {
  position: absolute;
  clip: rect(0,0,0,0);
}
.button {
  display: inline-block;
  margin-left: 12px;
  border: 1px solid #999;
  border-radius: 6px;
  padding: 6px 12px;
  background: linear-gradient(top,white 0,#E0E0E0 100%);
  box-shadow: 0 1px 2px rgba(0,0,0,0.25), inset 0 0 3px #fff;
  font: 13px "Helvetica Neue",sans-serif;
}
input[type="checkbox"]:checked + label {
  border: 1px solid #AAA;
  border-bottom-color: #CCC;
  border-top-color: #999;
  box-shadow: inset 0 1px 2px #aaa;
  background: linear-gradient(top,#E6E6E6 0,gainsboro 100%);
}
p {clear: left;}

dabblet.html

<div class="wrapper pageload">
  <div class="box">default</div>
  <div class="box endsame">end same</div>
  <div class="box startsame">start same</div>
  <div class="box bothsame">both same</div>
  <div class="box startonly">different from</div>
  <div class="box endonly">different to</div>
</div>
<div class="wrapper hover">
  <div class="box">default</div>
  <div class="box endsame">end same</div>
  <div class="box startsame">start same</div>
  <div class="box bothsame">both same</div>
  <div class="box startonly">different from</div>
  <div class="box endonly">different to</div>
</div>
<div class="wrapper checkbox">
<input type="checkbox" name="trigger" id="trigger">
<label class="button" for="trigger">animate</label>
  <div class="box">default</div>
  <div class="box endsame">end same</div>
  <div class="box startsame">start same</div>
  <div class="box bothsame">both same</div>
  <div class="box startonly">different from</div>
  <div class="box endonly">different to</div>
</div>
<p>The animation by default starts from and ends with the element’s default styles, so 
the minimal animation is from a keyframe (<code>from</code> etc) to the element’s default state
(1 keyframe). If triggered by a CSS change in state (like <code>:hover</code>) the pre-change 
in state values have no effect, unlike CSS Transforms.</p>

settings.json

{"version":"1.1","settings":{"prefixfree":"1"},"view":[{"template":"r\nc","active":true,"seethrough":false},{"template":"r\nh","active":false,"seethrough":false},{"template":"r\nch","active":false,"seethrough":false}]}