Example 21 — Controlling an animation Using @Keyframes (Figure 12-25)

dabblet.css

/* Example 21 — Controlling an animation Using @keyframes (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;
	position: relative;
}
figcaption {
	clear: left;
	padding-top: 1.5em;
}

figure figcaption {margin-top: 84px;}
figure .box {
  position: absolute;
  width: 44px;
  height: 44px;
  background: indianred;
}
figure:hover .box {
  -webkit-animation-name: shakeit;
     -moz-animation-name: shakeit;
      -ms-animation-name: shakeit;
       -o-animation-name: shakeit;
  -webkit-animation-duration: .5s;
     -moz-animation-duration: .5s;
      -ms-animation-duration: .5s;
       -o-animation-duration: .5s;
}
@-webkit-keyframes shakeit {
  10%, 37.5%, 75% {left: -10%;}
  22.5%, 52.5% {left: 10%;}
  75% {left: -7%;}
}
@-moz-keyframes shakeit {
  10%, 37.5%, 75% {left: -10%;}
  22.5%, 52.5% {left: 10%;}
  75% {left: -7%;}
}
@-ms-keyframes shakeit {
  10%, 37.5%, 75% {left: -10%;}
  22.5%, 52.5% {left: 10%;}
  75% {left: -7%;}
}
@-o-keyframes shakeit {
  10%, 37.5%, 75% {left: -10%;}
  22.5%, 52.5% {left: 10%;}
  75% {left: -7%;}
}

dabblet.html

<h1>Example 21 — Controlling an animation Using <code>@keyframes</code> (Figure 12-25)</h1>

<p>Example 20 is simple, we could just as easily have used a transition because it’s only animating between the initial and final states. Let’s add some keyframes and see what happens.</p>

<figure id="a-keyframed">
<pre class="callout column"><code>.box {position: absolute;}
:hover .box {
  animation-name: shakeit;
  animation-duration: .5s;
}
@keyframes shakeit {
  10%, 37.5%, <mark>75%</mark> {left: -10%;}
  22.5%, 52.5% {left: 10%;}
  <mark>75%</mark> {left: -7%;}
}

/* This @keyframes declaration could also be written:
@keyframes shakeit {
  10% {left: -10%;}
  22.5% {left: 10%;}
  37.5% {left: -10%;}
  52.5% {left: 10%;}
  75% {left: -7%;}
} */
</code></pre>
<div class="box"></div>
<figcaption><code>@keyframes</code> allow us to do complex animations not possible using <code>transition</code></figcaption>
</figure>

<p>We can use commas between keyframes properties when they share the same value, and percentage keyframe properties can contain decimal places. We’ve made a mistake in this example by defining the value for <code>75%</code> twice. If a property is defined for the same keyframe percentage selector in two different keyframes the later value (in this case <code>left: -7%;</code>) will be used.</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/4187699" 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"}