Example 22 — Using animation-timing-function (Figure 12-27)

dabblet.css

/* Example 22 — Using animation-timing-function (Figure 12-27) */
/* 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 {position: relative;}
figure div div {
  width: 20%;
  margin: 0 0 .5em;
  border: 3px solid #000;
  border-radius: .5em;
  padding: .33em;
  background: #fff;
  text-align: center;
}
/* Opera rules are for checking support when they implement */
figure:hover div div {
  -webkit-animation-name: presets;
     -moz-animation-name: presets;
      -ms-animation-name: presets;
       -o-animation-name: presets;
  -webkit-animation-duration: 2s;
     -moz-animation-duration: 2s;
      -ms-animation-duration: 2s;
       -o-animation-duration: 2s;
}
@-webkit-keyframes presets {
  to {-webkit-transform: translate(340%,0);}
}
@-moz-keyframes presets {
  to {-moz-transform: translate(340%,0);}
}
@-ms-keyframes presets {
  to {-ms-transform: translate(340%,0);}
}
@-o-keyframes presets {
  to {-o-transform: translate(340%,0);}
}
figure:hover .variable {
  -webkit-animation: variable 2s;
     -moz-animation: variable 2s;
      -ms-animation: variable 2s;
       -o-animation: variable 2s;
}
@-webkit-keyframes variable {
  33.333% {-webkit-transform: translate(113.333%,0);
    -webkit-animation-timing-function: step-start;}
  66.667% {-webkit-transform: translate(226.667%,0);
    -webkit-animation-timing-function: ease-out;}
  to {-webkit-transform: translate(340%,0);}
}
@-moz-keyframes variable {
  33.333% {-moz-transform: translate(113.333%,0);
    -moz-animation-timing-function: step-start;}
  66.667% {-moz-transform: translate(226.667%,0);
    -moz-animation-timing-function: ease-out;}
  to {-moz-transform: translate(340%,0);}
}
@-ms-keyframes variable {
  33.333% {-ms-transform: translate(113.333%,0);
    -ms-animation-timing-function: step-start;}
  66.667% {-ms-transform: translate(226.667%,0);
    -ms-animation-timing-function: ease-out;}
  to {-ms-transform: translate(340%,0);}
}
@-o-keyframes variable {
  33.333% {-o-transform: translate(113.333%,0);
    -o-animation-timing-function: step-start;}
  66.667% {-o-transform: translate(226.667%,0);
    -o-animation-timing-function: ease-out;}
  to {-o-transform: translate(340%,0);}
}
figure .linear {
  -webkit-animation-timing-function: linear;
     -moz-animation-timing-function: linear;
      -ms-animation-timing-function: linear;
       -o-animation-timing-function: linear;
}
/* figure .ease {} → default, so not needed */
figure .ease-in {
  -webkit-animation-timing-function: ease-in;
     -moz-animation-timing-function: ease-in;
      -ms-animation-timing-function: ease-in;
       -o-animation-timing-function: ease-in;
}
figure .ease-out {
  -webkit-animation-timing-function: ease-out;
     -moz-animation-timing-function: ease-out;
      -ms-animation-timing-function: ease-out;
       -o-animation-timing-function: ease-out;
}
figure .ease-in-out {
  -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;
}
figure .step-start {
  -webkit-animation-timing-function: step-start;
     -moz-animation-timing-function: step-start;
      -ms-animation-timing-function: step-start;
       -o-animation-timing-function: step-start;
}
figure .steps-start {
  -webkit-animation-timing-function: steps(3,start);
     -moz-animation-timing-function: steps(3,start);
      -ms-animation-timing-function: steps(3,start);
       -o-animation-timing-function: steps(3,start);
}
figure .steps {
  -webkit-animation-timing-function: steps(3);
     -moz-animation-timing-function: steps(3);
      -ms-animation-timing-function: steps(3);
       -o-animation-timing-function: steps(3);
}
figure .step-end {
  -webkit-animation-timing-function: step-end;
     -moz-animation-timing-function: step-end;
      -ms-animation-timing-function: step-end;
       -o-animation-timing-function: step-end;
}
figure .step-start, figure .variable {margin-top: 25px;}

dabblet.html

<h1>Example 22 — Using animation-timing-function (Figure 12-27)</h1>

<figure>
<div id="a-timing-presets">
<div class="ease-out"><code>ease-out</code></div>
<div class="ease"><strong><code>ease</code></strong></div>
<div class="linear"><code>linear</code></div>
<div class="ease-in-out"><code>ease-in-out</code></div>
<div class="ease-in"><code>ease-in</code></div>
<div class="step-start"><code>step-start</code></div>
<div class="steps-start"><code>steps(3,start)</code></div>
<div class="steps"><code>steps(3)</code></div>
<div class="step-end"><code>step-end</code></div>
<div class="variable"><em>variable</em></div>
</div>

<figcaption>
A demonstration of timing function values in an animation, using <code>animation-timing-function</code>. Compare this with <a href="http://dabblet.com/gist/4187546">Example 15</a> (<code>transition-timing-funtion</code> presets).</figcaption>
</figure>

<p>Unlike CSS Transitions an animation can have more than one timing function, as you can change the timing function <em>per keyframe</em> by adding <code>animation-timing-function</code> to the keyframe’s ruleset. This will override the animation’s timing function for that keyframe only. We did this for the “variable” box in the figure above using the following code:</p>

<pre class="callout"><code>@keyframes presets {
  33% {
    transform: translate(113%,0);
    animation-timing-function: step-start;
    }
  67% {
    transform: translate(227%,0);
    animation-timing-function: ease-out;
    }
  to {transform: translate(340%,0);}
}
</code></pre>

<p><!-- todo: diagram of this -->This uses three timing values:</p>
<ul>
<li>0%-33% uses <code>ease</code> (the default)</li>
<li>33%-67% uses <code>step-start</code>, defined in the 33% keyframe ruleset</li>
<li>67%-100% uses <code>ease-out</code>, defined in the 67% keyframe ruleset</li>
</ul>
<hr />

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