Example 23 — animation-delay (Figure 12-28)

dabblet.css

/* Example 23 — animation-delay (Figure 12-28) */
/* 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;
}

figure figcaption {margin-top: 10.64em;}
figure .relative {position: relative;}
figure .box {
  position: absolute;
  top: 2.66em;
  width: 20%;
  margin: 0 0 .5em;
  border: 3px solid #000;
  border-radius: .5em;
  padding: .33em;
  background: #fff;
  text-align: center;
}
figure .positive {top: 0;}
figure .negative {top: 5.32em;}
/* Opera rules are for checking support when they implement */
figure:hover .box {
  -webkit-animation-name: moveit;
     -moz-animation-name: moveit;
      -ms-animation-name: moveit;
       -o-animation-name: moveit;
  -webkit-animation-duration: 3s;
     -moz-animation-duration: 3s;
      -ms-animation-duration: 3s;
       -o-animation-duration: 3s;
  -webkit-animation-timing-function: linear;
     -moz-animation-timing-function: linear;
      -ms-animation-timing-function: linear;
       -o-animation-timing-function: linear;
}
figure:hover .positive {
  -webkit-animation-delay: 1s;
     -moz-animation-delay: 1s;
      -ms-animation-delay: 1s;
       -o-animation-delay: 1s;
}
figure:hover .negative {
  -webkit-animation-delay: -1s;
     -moz-animation-delay: -1s;
      -ms-animation-delay: -1s;
       -o-animation-delay: -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%;}
}

dabblet.html

<h1>Example 23 — animation-delay (Figure 12-28)</h1>

<figure id="a-delay">
<pre class="callout"><code>:hover .box {animation-duration: 3s;}
:hover .positive-delay {animation-delay: 1s;} /* “delay 1s” box */
/* animation-delay is 0 by default (the “no delay” box) */
:hover .negative-delay {animation-delay: -1s;} /* “delay -1s” box */
</code></pre>
<div class="relative">
<div class="box positive">delay <code>1s</code></div>
<div class="box">no delay</div>
<div class="box negative">delay <code>-1s</code></div>
</div>
<figcaption>We can delay or jump-start the start of an animation using <code>animation-delay</code></figcaption>
</figure>

<p>In the above example, the default animation doesn’t declare <code>animation-delay</code>, so it has the default value <code>0s</code> and the animation takes three seconds. Adding <code>animation-delay: 1s;</code> means the animation starts after a one second delay and takes <em>four</em> seconds to end. Adding <code>animation-delay: -1s;</code> means the animation starts immediately from where it’d be if one second had already elapsed, and the animation ends in only <em>two</em> seconds.</p>


<hr />

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