Example 28 — animation shorthand property (Figure 12-33)

dabblet.css

/* Example 28 — animation shorthand property (Figure 12-33) */
/* 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: 56px;
	padding-top: 1.5em;
}
.sidenote {
	font-size: 82.5%;
	font-style: italic;
}

figure {position: relative;}
figure div {
  position: absolute;
  left: 0;
  width: 44px;
  height: 44px;
  background: rgb(205,92,92);
}
figure:hover div {
  -webkit-animation-name: moveit, colorstep, fade;
     -moz-animation-name: moveit, colorstep, fade;
      -ms-animation-name: moveit, colorstep, fade;
       -o-animation-name: moveit, colorstep, fade;
  -webkit-animation-duration: 3s;
     -moz-animation-duration: 3s;
      -ms-animation-duration: 3s;
       -o-animation-duration: 3s;
  -webkit-animation-timing-function: linear, steps(2,start);
     -moz-animation-timing-function: linear, steps(2,start);
      -ms-animation-timing-function: linear, steps(2,start);
       -o-animation-timing-function: linear, steps(2,start);
}
@-webkit-keyframes moveit {
  to {
    left: 100%;
    margin-left: -44px;
    }
}
@-moz-keyframes moveit {
  to {
    left: 100%;
    margin-left: -44px;
    }
}
@-ms-keyframes moveit {
  to {
    left: 100%;
    margin-left: -44px;
    }
}
@-o-keyframes moveit {
  to {
    left: 100%;
    margin-left: -44px;
    }
}
@-webkit-keyframes colorstep {
  to {background: rgb(51,51,51);}
}
@-moz-keyframes colorstep {
  to {background: rgb(51,51,51);}
}
@-ms-keyframes colorstep {
  to {background: rgb(51,51,51);}
}
@-o-keyframes colorstep {
  to {background: rgb(51,51,51);}
}
@-webkit-keyframes fade {to {opacity: .5;}}
@-moz-keyframes fade {to {opacity: .5;}}
@-ms-keyframes fade {to {opacity: .5;}}
@-o-keyframes fade {to {opacity: .5;}}
/* @necolas clearfix */
.group:before,
.group:after {
	content: "";
	display: table;
}
.group:after {
	clear: both;
}
/* For IE 6/7 only */
.group {
	*zoom: 1;
}

dabblet.html

<h1>Example 28 — animation shorthand property (Figure 12-33)</h1>

<p><a href="http://dabblet.com/gist/4187883">Our last animation</a> used individual <code>animation-*</code> properties:</p>

<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;
}
</code></pre>

<p>It’s equivalent to this (much shorter) <code>animation</code> property:</p>

<pre class="callout"><code>:hover .box {animation: runner 3s ease-in-out infinite alternate;}
</code></pre>

<aside class="sidenote"><p>Remember we don’t have to include any properties with a default value — in this case <code>animation-delay</code> and <code>animation-fill-mode</code></p></aside>

<p>We can also specify more than one animation, using commas to separate values, for both individual <code>animation-*</code> properties and for the shorthand <code>animation</code> property. Both ways are demonstrated here:</p>

<figure id="a-multiple">
<pre class="callout grouped-values"><code>/* Using individual properties for multiple animations: */
:hover .box {
/* (values aligned to make their groupings clear) */
             animation-name: <span>moveit</span>, <span>     colorstep</span>, <span>fade</span>;
         animation-duration:     3s;                      /* one value? */
  animation-timing-function: linear, steps(2,start);      /* two values? */
}
</code></pre>
<pre class="callout"><code>/* The same styles using the animation shorthand property: */
:hover .box {
  animation: moveit 3s linear, colorstep 3s steps(2,start), fade 3s linear;
}
</code></pre>
<aside class="sidenote"><p>It seems we’re missing some values. Read on to find out why…</p></aside>
<div class="group"></div>
<figcaption>Using two animations so we can use different timing functions for each one — <code>linear</code> for movement, and <code>steps(2)</code> for background color. Both code blocks are equivalent.</figcaption>
</figure>


<p class="callout highlight-block">In the individual properties form the first value of each property will be associated with the first <code>animation-name</code> value. If there aren’t enough values for the number of animation names, the values that are present are repeated, as is the case in the above example with <code>animation-duration</code> and <code>animation-timing-function</code>. By repeating the value(s) these will be treated as <code>animation-duration: 3s, 3s 3s;</code> and <code>animation-timing-function: linear, steps(2,steps), linear;</code>.</p>


<hr />

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