Example 27 — animation-play-state (Figure 12-32)

dabblet.css

/* Example 27 — animation-play-state (Figure 12-32) */
/* 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 {
  position: absolute;
  left: 0%;
  width: 10em;
  margin: 0 0 .5em;
  border: 3px solid #000;
  border-radius: .5em;
  padding: .33em;
  background: #fff;
  text-align: center;
}
figure:hover div {
  -webkit-animation-name: running;
     -moz-animation-name: running;
      -ms-animation-name: running;
       -o-animation-name: running;
  -webkit-animation-duration: 3s;
     -moz-animation-duration: 3s;
      -ms-animation-duration: 3s;
       -o-animation-duration: 3s;
  -webkit-animation-timing-function: ease-in-out;
     -moz-animation-timing-function: ease-in-out;
      -ms-animation-timing-function: ease-in-out;
       -o-animation-timing-function: ease-in-out;
  -webkit-animation-iteration-count: infinite;
     -moz-animation-iteration-count: infinite;
      -ms-animation-iteration-count: infinite;
       -o-animation-iteration-count: infinite;
  -webkit-animation-direction: alternate;
     -moz-animation-direction: alternate;
      -ms-animation-direction: alternate;
       -o-animation-direction: alternate;
}
figure div:hover {
  -webkit-animation-play-state: paused;
     -moz-animation-play-state: paused;
      -ms-animation-play-state: paused;
       -o-animation-play-state: paused;
}
@-webkit-keyframes running {
  to {
    left: 100%;
    margin-left: -10em;
  }
}
@-moz-keyframes running {
  to {
    left: 100%;
    margin-left: -10em;
  }
}
@-ms-keyframes running {
  to {
    left: 100%;
    margin-left: -10em;
  }
}
@-o-keyframes running {
  to {
    left: 100%;
    margin-left: -10em;
  }
}

dabblet.html

<h1>Example 27 — animation-play-state (Figure 12-32)</h1>

<!-- the March 2009 working draft spec did mention this property was being considered for removal. It’s not anymore -->
<p>This simple property has the value <code>running</code> by default. Changing this to <code>paused</code> will pause the animation, as shown in figure 35. If the value is then changed to <code>running</code>, the animation will resume from where it left off.</p>

<figure id="a-play-state">
<pre class="callout"><code>:hover .box {
  animation-name: runner;
  animation-duration: 3s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}
<mark>.box:hover {animation-play-state: paused;}</mark>
</code></pre>
<div><code>:hover</code> me to pause</div>
<figcaption>The animation will start when you hover over this figure, but if you hover over the box it will be paused</figcaption>
</figure>

<p>While you can stop an element animating via JavaScript by just removing the class that applies it, this will instantly change the animated element(s) to their pre-animation state. Being able to pause the animation (with or without JavaScript), and then pick up from where we left off, opens up some nice new interactivity options.</p>

<hr />

<ul>
	<li><a href="http://dev.w3.org/csswg/css3-animations/#animation-play-state-property" title="CSS Animations">CSS Animations — The ‘animation-play-state’ Property</a></li>
	<li><a href="http://dabblet.com/gist/4187883" 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"}