Animations plus animations/transitions

dabblet.css

/* Animations plus animations/transitions */
/* ref: http://mattwilcox.net/sandbox/css3-animations-1/index.htm */
/* also ref: http://css-tricks.com/restart-css-animation/ */
.animate-on-load {animation: bgcolor 3s;}
.animate-on-hover:hover {animation: bgcolor 3s;}
.animate-on-hover2:hover {animation: bgcolor2 3s;} /* change anim name */
.animate-on-hover3:hover {animation: bgcolor 2.9s;} /* change duration */
.animate-on-hover4:hover {animation: bgcolor 3s 2;} /* change iteration-count */
.transition-on-hover {transition: background-color 2s;}
.transition-on-hover:hover {background-color: #777;}
.transform-on-load {
  animation: scale 3s;
  transition: all 2s;
}
.transform-on-hover:hover {transform: rotate(-30deg);}
@keyframes bgcolor {to{background-color: #777;}}
@keyframes bgcolor2 {to{background-color: #777;}}
@keyframes scale {to{transform: scale(2);}}
h1 {
  font-size: 1.5em;
  margin-top: 2em;
}
.box {
  position: relative;
  width: 168px;
  height: 48px;
  margin: 24px;
  border: 5px solid #999;
  border-radius: 5px;
  padding: 3px;
}
.desc {
  position: absolute;
  left: 192px;
  top: 0px;
  width: 200%;
}

dabblet.html

<h1>Combining on-load animations with <code>:hover</code> animations/transitions</h1>
<p>tl;dr you can’t apply two identical animation declarations to different states of an element, other stuff (anim+differently named identical anim, anim+transition) is fine. Changing other properties works in WebKit but not Firefox. Also check <a href="http://css-tricks.com/restart-css-animation/">Restart CSS Animations</a> on CSS Tricks.</p>
<div class="box">default</div>
<div class="box animate-on-load"><code>animate-on-load</code></div>
<div class="box animate-on-hover"><code>animate-on-hover</code></div>
<div class="box transition-on-hover"><code>transition-on-hover</code></div>
<div class="box animate-on-load animate-on-hover"><code>animate-on-load animate-on-hover</code><span class="desc">on load ok, but applying an identical <code>animation</code> via <code>:hover</code> doesn’t work</span></div>
<div class="box animate-on-load animate-on-hover2"><code>animate-on-load animate-on-hover2</code><span class="desc">making an identical <code>@keyframes</code> animation with a different name for <code>:hover</code> works in WebKit + FF</span></div>
<div class="box animate-on-load animate-on-hover3"><code>animate-on-load animate-on-hover3</code><span class="desc">changing to a different <code>duration</code> in the <code>:hover animation</code> works in WebKit but not FF</div>
<div class="box animate-on-load animate-on-hover4"><code>animate-on-load animate-on-hover4</code><span class="desc">changing to a different <code>iteration-count</code> in the <code>:hover animation</code> works in WebKit, but is buggy in FF (1st time instant, no change on subsequent hovers)</div>
<div class="box animate-on-load transition-on-hover"><code>animate-on-load transition-on-hover</code></div>
<div class="box transform-on-load transform-on-hover"><code>transform-on-load transform-on-hover</code></div>

settings.json

{"view":"","prefixfree":"1","page":"result"}