Skip to content

Instantly share code, notes, and snippets.

@oli
Created January 22, 2012 10:22
  • Star 0 You must be signed in to star a gist
  • Fork 2 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save oli/1656494 to your computer and use it in GitHub Desktop.
Animations plus animations/transitions
/* 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%;
}
<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>
{"view":"","prefixfree":"1","page":"result"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment