Example 17 — The transition-delay property (Figure 12-23)

dabblet.css

/* Example 17 — The transition-delay property (Figure 12-23) */
/* 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,
h2 {
	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;
  -webkit-transition-property: all;
     -moz-transition-property: all;
      -ms-transition-property: all;
       -o-transition-property: all;
          transition-property: all;
  -webkit-transition-duration: 3s;
     -moz-transition-duration: 3s;
      -ms-transition-duration: 3s;
       -o-transition-duration: 3s;
          transition-duration: 3s;
  -webkit-transition-timing-function: linear;
     -moz-transition-timing-function: linear;
      -ms-transition-timing-function: linear;
       -o-transition-timing-function: linear;
          transition-timing-function: linear;
}
figure .positive {
  top: 0;
  -webkit-transition-delay: 1s;
     -moz-transition-delay: 1s;
      -ms-transition-delay: 1s;
       -o-transition-delay: 1s;
}
figure .negative {
  top: 5.32em;
  -webkit-transition-delay: -1s;
     -moz-transition-delay: -1s;
      -ms-transition-delay: -1s;
       -o-transition-delay: -1s;
}
figure:hover .box {
  left: 80%;
}

dabblet.html

<h1>Example 17 — The transition-delay property (Figure 12-23)</h1>

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

<hr />
<h2>Multiple Transition Values, and the <code>transition</code> Shorthand Property</h2>

<p>All of these properties can take more than one value, separated by commas, allowing us to transition more than one property at once with different settings. When using multiple values for each <code>transition-*</code> property, the order of the values is important, as the values of each property are grouped together based on this order. For example, this code block:</p>

<pre class="callout grouped-values"><code>.warning {
  transition-property: <span> left</span>, <span>opacity</span>, <span>color</span>;
  transition-duration: 600ms,   300ms, 400ms;
     transition-delay:    0s,      0s, 300ms;
} /* values aligned to make their groupings clear */</code></pre>

<p>is equivalent to these three comma-separated transitions:</p>

<pre class="callout"><code>.warning {transition: left 600ms, opacity 300ms, color 400ms 300ms;}</code></pre>

<hr />
<ul>
	<li><a href="http://dev.w3.org/csswg/css3-transitions/#transition-delay-property" title="CSS Transitions">CSS Transitions — The ‘transition-delay’ Property</a></li>
	<li><a href="http://dabblet.com/gist/4187605" 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":"css"}