Example 20 — A simple animation (Figure 12-25)

dabblet.css

/* Example 20 — A simple animation (Figure 12-25) */
/* 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;
	padding-top: 1.5em;
}
.sidenote {
  font-size: 82.5%;
  font-style: italic;
}

figure {position: relative;}
figure figcaption {margin-top: 84px;}
figure div {
  position: absolute;
  left: 0;
  width: 44px;
  height: 44px;
  background-color: #424242;
  background-color: indianred;
}
figure:hover div {
  -webkit-animation-name: moveit;
     -moz-animation-name: moveit;
      -ms-animation-name: moveit;
       -o-animation-name: moveit;
  -webkit-animation-duration: 1s;
     -moz-animation-duration: 1s;
      -ms-animation-duration: 1s;
       -o-animation-duration: 1s;
}
@-webkit-keyframes moveit {
  to {left: 90%;}
}
@-moz-keyframes moveit {
  to {left: 100%;}
}
@-ms-keyframes moveit {
  to {left: 100%;}
}
@-o-keyframes moveit {
  to {left: 100%;}
}

dabblet.html

<h1>Example 20 — A simple animation (Figure 12-25)</h1>

<figure id="a-simple">
<pre class="callout"><code>.box {position: absolute;}
:hover .box {
  -webkit-animation-name: moveit;
     -moz-animation-name: moveit;
      -ms-animation-name: moveit;
       -o-animation-name: moveit;
  -webkit-animation-duration: 1s;
     -moz-animation-duration: 1s;
      -ms-animation-duration: 1s;
       -o-animation-duration: 1s;
}
@-webkit-keyframes moveit {to {left: 100%;}}
@-moz-keyframes moveit {to {left: 100%;}}
@-ms-keyframes moveit {to {left: 100%;}}
@-o-keyframes moveit {to {left: 100%;}}
</code></pre>
<div></div>
<figcaption>Even a simple animation currently requires a lot of vendor-specific CSS. But hey, keyframed animations in CSS!</figcaption>
</figure>

<p>That seems like a lot because we’re writing declarations to define the animation (the <code>@keyframes</code> block) <em>and</em> to call it (the <code>animation-*</code> properties), plus we’re writing everything four times due to browser prefixes, but really it’s unusually <em>little</em>. Did we really just get animation in CSS with only this?</p>

<aside class="sidenote"><p>This code is only for example — don’t use unprefixed <code>animation-*</code> and <code>@keyframes</code> declarations for now</p></aside>
<pre class="callout"><code>:hover .box {
  animation-name: moveit;
  animation-duration: 1s;
}
@keyframes moveit {to {left: 100%;}}</code></pre>

<p>But how? As usual, we are helped by defaults…</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/4187683" 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":"html"}