Example 29 — CSS Animation gotchas

dabblet.css

/* Example 29 — CSS Animation gotchas */
/* From Beginning HTML5 and CSS3 — The Web Evolved http://thewebevolved.com/ */
body {
	width: 80%;
	max-width: 42em;
	margin: auto;
	font: 1em/1.5 Georgia, serif;
}
h1 {
	font-weight: normal;
}
hr,
footer {
	margin: 2.5em 0;
}
pre {
	-moz-tab-size: 2;
	-o-tab-size: 2;
	tab-size: 2;
}
pre,
code,
samp,
var {
	word-wrap: break-word;
	white-space: pre-wrap;
}
figure {
	margin-left: 0;
	margin-right: 0;
}
figcaption {
	clear: left;
	margin-top: 84px;
	padding-top: 1.5em;
}

figure {position: relative;}
figure div:before {
  content: "";
  position: absolute;
  left: 0;
  width: 44px;
  height: 44px;
  background: indianred;
  -webkit-animation: moveit 3s ease-in-out infinite alternate;
     -moz-animation: moveit 3s ease-in-out infinite alternate;
      -ms-animation: moveit 3s ease-in-out infinite alternate;
       -o-animation: moveit 3s ease-in-out infinite alternate;
}
@-webkit-keyframes moveit {
  to {
    left: 100%;
    margin-left: -44px;
  }
}
@-moz-keyframes moveit {
  to {
    left: 100%;
    margin-left: -44px;
  }
}
@-ms-keyframes moveit {
  to {
    left: 100%;
    margin-left: -44px;
  }
}
@-o-keyframes moveit {
  to {
    left: 100%;
    margin-left: -44px;
  }
}

dabblet.html

<h1>Example 29 — CSS Animation gotchas</h1>

<p>At the time of writing only Firefox 4 and above can transition and animate CSS generated content, as seen here (or perhaps not):</p>

<figure id="a-gotcha">
<pre class="callout"><code>div<mark>:before</mark> {
  content: "";
  position: absolute;
  left: 0;
  width: 44px;
  height: 44px;
  -webkit-animation: moveit 3s ease-in-out infinite alternate;
     -moz-animation: moveit 3s ease-in-out infinite alternate;
      -ms-animation: moveit 3s ease-in-out infinite alternate;
       -o-animation: moveit 3s ease-in-out infinite alternate;
}</code></pre>
<div></div>
<figcaption>Animating pseudo-elements is only supported by Firefox 4+ at the time of writing</figcaption>
</figure>
<!-- todo: is this still relevant? wfm
test: http://labs.dabblet.com/gist/1657290
ref: http://twitter.com/estellevw/status/40528526541066240
 -->

<hr />

<!-- todo: is this still relevant? wfm
test: http://dabblet.com/gist/1657290
ref: http://twitter.com/estellevw/status/40528526541066240
 -->
<p>If your animation isn’t working and doesn’t have a <code>from {…}</code>/<code>0% {…}</code> or <code>to {…}</code>/<code>100% {…}</code> keyframe, try adding one, making sure the values are different to the element’s default styles. This is because in some older browsers animations lacking starting or ending keyframes could be buggy. Here’s a <a href="http://dabblet.com/gist/1657290" title="dabblet.com">test case animation</a> for you to check.</p>

<hr />

<p>You can’t apply an animation to the same element twice, e.g. on load and via the <code>:hover</code> states. The workaround is to duplicate the animation’s <code>@keyframes</code> declaration with a different name. For more info see these examples of <a href="http://dabblet.com/gist/1656494" title="Combining on-load animations with :hover animations/transitions">combining on-load animations with :hover animations/transitions</a>.</p>

<hr />

<ul>
	<li><a href="http://dev.w3.org/csswg/css3-animations/" title="CSS Animations">CSS Animations</a></li>
	<li><a href="http://dabblet.com/gist/4192781" title="dabblet.com">This example on Dabblet</a></li>
</ul>

<footer>From <a href="http://thewebevolved.com/"><cite>Beginning HTML5 and CSS3 — The Web Evolved</cite></a>, Chapter 12</footer>

dabblet.js

// alert('Hello world!');

settings.json

{"view":"split","fontsize":"90","seethrough":"","prefixfree":"1","page":"result"}