Example 19 — Declaring CSS Animations

dabblet.css

/* Example 19 — Declaring CSS Animations */
/* 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;
}

dabblet.html

<h1>Example 19 — Declaring CSS Animations</h1>

<p>CSS Animations are added in two parts, as shown in the following code:</p>

<ol>
<li>A <code>@keyframes</code> block containing individual keyframes defining and naming an animation</li>
<li><code>animaton-*</code> properties to add a named <code>@keyframes</code> animation to an element, and control the animation’s behaviour</li>
</ol>

<aside class="sidenote"><p>There’s no need for a <code>@keyframes</code> block to be before a declaration applying it in the CSS file. We generally add them to a section towards the end of our CSS based on the principle of <em>general to specific</em>.</p></aside>

<figure>
<pre class="callout"><code>@keyframes popup { /* ← define the animation “popup” */
  from {…} /* CSS for any differences between the element’s initial state and the animation’s initial state */
  to {…} /* CSS for the animation’s final state */
}
.popup {animation: popup 1s;} /* ← apply the animation “popup” */</code></pre>
<figcaption>A simple example of the two parts of a CSS Animation — a <code>@keyframes</code> block, and <code>animation-*</code> properties to apply the animation</figcaption>
</figure>

<p>Each keyframe rule starts with a <i class="units">percentage</i>, or the <i class="units">keywords</i> <code>from</code> (the same as <code>0%</code>) or <code>to</code> (the same as <code>100%</code>), acting like a selector, specifying where in the animation the keyframe occurs. Percentages represent a percentage of the <code>animation-duration</code>, so a <code>50%</code> keyframe in a <code>2s</code> animation would be <code>1s</code> into an animation. Figure 27 shows an <code>@keyframes</code> declaration with several keyframe rules:</p>

<pre class="callout"><code>@keyframes popup {
  0% {…} /* the start of the animation (the same as “from”) */
  25% {…} /* a keyframe one quarter through the animation */
  66.6667% {…} /* a keyframe two thirds through the animation */
  …
  to {…} /* the end of the animation (the same as “100%”) */
}</code></pre>


<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/4187665" 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"}