css-transitions-1/use-cases.html

<html>
<title>Use cases for transitions/animations/effects</title>
<style>
body { margin: 1em }
table { border-collapse: collapse }
td, th { padding: 0.3em; border: thin solid black; vertical-align: top; text-align: left; min-width: 12em; }
.issue { color: red }
</style>


<h1>Use cases for transitions/animations/effects</h1>

<table>
<tr><th>Use case</th><th>Current drafts (<a href="http://dev.w3.org/csswg/css3-transitions/">transitions</a>, <a href="http://dev.w3.org/csswg/css3-animations/">animations</a>)<th>the <a href="#effect">'effect'</a> proposal</th><th>Tab's <a href="http://lists.w3.org/Archives/Public/www-style/2010Apr/0259.html">proposal</a><th>Brad's <a href="">proposal</a></th><th>Andrew's proposal <a href="http://lists.w3.org/Archives/Public/www-style/2010Apr/0264.html">[1]</a>, <a href="http://lists.w3.org/Archives/Public/www-style/2010Apr/0332.html">[2]</a></th><th>Use case</th>

<tr><td>1a: Change the color of an element from red to green when
the element is hovered. The change should occur over a period of 1
second. When the element is un-hovered, the reverse change should
occur.

<td>
<pre>
foo { 
  color: red; 
  transition: color 1s;
}
foo:hover { 
  color: green;
}
</pre>

<td>
<pre>
foo { 
  color: red; 
  effect: change(color) 1s;
}
foo:hover { 
  color: green;
}
</pre>


<td>
<pre>
foo {
  color: red;
  transition: color 1s;
}
foo:hover {
  color: green;
}
<pre>

<td>
<pre>
foo { 
  color: red; 
  transition: color 1s;
}
foo:hover { 
  color: green;
}
</pre>

<td>
<pre>
foo {
  color red;
  animate: color 1s;
}
foo:hover { 
  color: green;
}
</pre>

<td>1a: Change the color of an element from red to green when
the element is hovered. The change should occur over a period of 1
second. When the element is un-hovered, the reverse change should
occur.

<tr><td>1b: Same as 1a, but the reverse change should take 0.8 second.

<td>
<pre>
foo { 
  color: red; 
  transition: color 1s;
}
foo:hover { 
  color: green;
  transition: color 0.8s;
}
</pre>

<td>
<pre>
foo { 
  color: red; 
  effect: change(color) 1s;
}
foo:hover { 
  color: green;
  effect: change(color) 0.8s;
}
</pre>

<td>
<pre>
foo {
  color: red;
  transition: color 1s;
}
foo:hover {
  color: green;
  transition: color .8s;
}
</pre>

<td>
<pre>
foo { 
  color: red; 
  transition: color 1s;
}
foo:hover { 
  color: green;
  transition: color 0.8s;
}
</pre>

<td>
<pre>
foo { 
  color: red; 
  animate: color 1s;
}
foo:hover { 
  color: green;
  animate: color 0.8s;
}
</pre>


<td>1b: Same as 1a, but the reverse change should take 0.8 second.

<tr><td>2a: Play the 'bounce animation once for 1s when the element is hovered. 

<td>
<pre>
foo:hover {
  animation: bounce 1s;
}
@keyframes bounce {
  from { top: 0; }
  33%  { top: -20px; }
  66%  { top: 20px; }
  to   { top: 0; }
}
</pre>

<td>
<pre>
foo:hover {
  effect: play(bounce) 1s;
}
@animation bounce {
  from { top: 0; }
  33%  { top: -20px; }
  66%  { top: 20px; }
  to   { top: 0; }
}
</pre>

<td>
<pre>
foo:hover {
  play-in: bounce 1s;
}
@keyframes bounce {
  from { top: 0; }
  33%  { top: -20px; }
  66%  { top: 20px; }
  to   { top: 0; }
}
</pre>

<td>
<pre>
foo:hover {
  animation: bounce 1s;
}
@keyframes bounce {
  from { top: 0; }
  33%  { top: -20px; }
  66%  { top: 20px; }
  to   { top: 0; }
}
</pre>

<td>
<pre>
foo:hover {
  animate-in: "bounce" top 1s once;
}
@profile "bounce"
  0% 0px,
  33% -20px,
  66% 20px,
  100% 0px;
</pre>


<td>2a: Play the 'bounce animation once for 1s when the element is hovered. 


<tr><td>2b: Same as 2a, but also play the animation when the element is un-hovered. 

<td>not possible in CSS

<td>
<pre>
foo:hover {
  effect: play(bounce) 1s, 
    on-exit play(bounce) 1s;
}

@animation bounce {
  from { top: 0; }
  33%  { top: -20px; }
  66%  { top: 20px; }
  to   { top: 0; }
}
</pre>

<td>
<pre>
foo:hover {
  play-in: bounce 1s;
  play-out: bounce 1s;
}
@keyframes bounce {
  from { top: 0; }
  33%  { top: -20px; }
  66%  { top: 20px; }
  to   { top: 0; }
}
</pre>


<td>
<pre>
foo { 
  position:static; 
  transition: position 1s / bounce 1s; 
}
foo:hover { position:relative; }

@keyframes bounce {
  from { top: 0; }
  33%  { top: -20px; }
  66%  { top: 20px; }
  to   { top: 0; }
}
</pre>

<td>
<pre>
foo:hover {
  animate: "bounce" top 1s once;
}
@profile "bounce" 
  0% 0px, 
  33% -20px, 
  66% 20px, 
  100% 0px;
</pre>

<td>2b: Same as 2a, but also play the animation when the element is un-hovered. 

<tr><td>2c: Same as 2b, but play the animation in reverse when un-hovered.

<td>not possible

<td>
<pre>
foo:hover {
  effect: play(bounce) 1s, 
    on-exit play(bounce) 1s reverse;
}
@animation bounce {
  from { top: 0; }
  33%  { top: -20px; }
  66%  { top: 20px; }
  to   { top: 0; }
}
</pre>

<td>
<pre>
foo:hover {
  play-in: bounce 1s;
  play-out: bounce reversed 1s;
}
@keyframes bounce {
  from { top: 0; }
  33%  { top: -20px; }
  66%  { top: 20px; }
  to   { top: 0; }
}
</pre>

<p>(or whatever, I don't care how keyframes are reversed, as long as
they <em>can</em> be reversed)

<td>
<pre>
foo { 
  position:static; 
  transition: position 1s / bounce 1s alternate;
}
foo:hover { 
  position:relative; 
  transition-animation: bounce 1s; 
}
@keyframes bounce {
  from { top: 0; }
  33%  { top: -20px; }
  66%  { top: 20px; }
  to   { top: 0; }
}
</pre>

<td>
<pre>
foo:hover {
  animate-in:  "bounce" top 1s once;
  animate-out: "reversed-bounce" top 1s once;
}
@profile "reversed-bounce"
  0% 0px,
  33% 20px,
  66% -20px,
  100% 0px;

@profile "bounce" 
  0% 0px, 
  33% -20px, 
  66% 20px, 
  100% 0px;
</pre>

<td>2c: Same as 2b, but play the animation in reverse when un-hovered.


<tr><td>3a: When an element's class changes from "one" to "two", move the element 500px rightwards and simultaneously play the 'bounce' animation 5 times for a total of 1s.

<td>
<pre>
.one {
  position: relative;
  left: 0px;
  transition: left 1s;
}
.two {
  position: relative;
  left: 500px;
  animation: bounce 0.2s 5;
}
@keyframes bounce {
  from { top: 0; }
  33%  { top: -20px; }
  66%  { top: 20px; }
  to   { top: 0; }
}
</pre>

<td>
<pre>
.one {
  position: relative;
  left: 0px;
  effect: change(left) 1s;
}
.two {
  position: relative;
  left: 500px;
  effect: play(bounce) 0.2s 5;
}
@keyframes bounce {
  from { top: 0; }
  33%  { top: -20px; }
  66%  { top: 20px; }
  to   { top: 0; }
}
</pre>

<td>
<pre>
.one {
  position: relative;
  left: 0px;
  transition: left 1s;
}
.two {
  position: relative;
  left: 500px;
  play-in: bounce .2s 5;
}
@keyframes bounce {
  from { top: 0; }
  33%  { top: -20px; }
  66%  { top: 20px; }
  to   { top: 0; }
}
</pre>

<td>
<pre>
.one {
  position: relative;
  left: 0px;
  transition: left 1s;
}
.two {
  position: relative;
  left: 500px;
  animation: bounce 0.2s 5;
}
@keyframes bounce {
  from { top: 0; }
  33%  { top: -20px; }
  66%  { top: 20px; }
  to   { top: 0; }
}
</pre>

<td>
<pre>
.one {
  position: relative;
  left: 0px;
}
.two {
  position: relative;
  left: 500px;
  animate-in: "bounce" top 0.2s 5,
              linear left 1s once;
}
@profile "bounce"
  0% 0px,
  33% -20px,
  66% 20px,
  100% 0px;

</pre>

<td>3a: When an element's class changes from "one" to "two", move the element 500px rightwards and simultaneously play the 'bounce' animation 5 times for a total of 1s.


<tr><td>3b: Same as 3a, but also play the 'bounce' animation when the class of the element is changed back from "two" to "one", while the element is moved back to its original position.

<td>
not possible in CSS
<td>
<pre>
.one {
  position: relative;
  left: 0px;
  effect: change(left) 1s;
}

.two {
  position: relative;
  left: 500px;
  effect: play(bounce) 10 0.1s, 
    on-exit play(bounce);
}
@keyframes bounce {
  from { top: 0; }
  33%  { top: -20px; }
  66%  { top: 20px; }
  to   { top: 0; }
}
</pre>

<td>
<pre>
.one {
  position: relative;
  left: 0px;
  transition: left 1s play(bounce .2s 5);
}

.two {
  position: relative;
  left: 500px;
}
@keyframes bounce {
  from { top: 0; }
  33%  { top: -20px; }
  66%  { top: 20px; }
  to   { top: 0; }
}
</pre>

<td>
<pre>
.one {
  position: relative;
  left: 0px;
  transition: left 1s / bounce .2s 5;
}
.two {
  position: relative;
  left: 500px;
}
@keyframes bounce {
  from { top: 0; }
  33%  { top: -20px; }
  66%  { top: 20px; }
  to   { top: 0; }
}
</pre>

<td>
<pre>
.one {
  position: relative;
  left: 0px;
}
.two {
  position: relative;
  left: 500px;
  animate: "bounce" top 0.2s 5,
             linear left 1s once;
}
@profile "bounce"
  0% 0px,
  33% -20px,
  66% 20px,
  100% 0px;
</pre>

<td>3b: Same as 3a, but also play the 'bounce' animation when the class of the element is changed back from "two" to "one", while the element is moved back to its original position.

<tr><td>3c: Same as 3b, but play the 'sway' animation (which takes 2s to run) continously between the two 'bounce' animations.

<td>not possible in CSS
<td>
<pre>
.one {
  position: relative;
  left: 0px;
  change(left) 1s;
}

.two {
  position: relative;
  left: 500px;
  effect: play(bounce) 10 0.1s, 
    play(sway) 2s 1s during,
    on-exit play(bounce);
}
@keyframes bounce {
  from { top: 0; }
  33%  { top: -20px; }
  66%  { top: 20px; }
  to   { top: 0; }
}
@keyframes sway {
  from { left: 0; }
  33%  { left: -20px; }
  66%  { left: 20px; }
  to   { left: 0; }
}
</pre>

<td>
<pre>
.one {
  position: relative;
  left: 0px;
  transition: left 1s play(bounce .2s 5);
}

.two {
  position: relative;
  left: 500px;
  play-during: sway 1s 1s;
}
@keyframes bounce {
  from { top: 0; }
  33%  { top: -20px; }
  66%  { top: 20px; }
  to   { top: 0; }
}
</pre>

<p>(Delay added to make it wait until the transition is done.)

<td>
<pre>
.one {
  position: relative;
  left: 0px;
  transition: left 1s / bounce .2s 5;
}
.two {
  position: relative;
  left: 500px;
  transition: left 1s / bounce .2s 5;
  animation: bounce 0.2s 5, sway 1s 1s infinite;
}
@keyframes bounce {
  from { top: 0; }
  33%  { top: -20px; }
  66%  { top: 20px; }
  to   { top: 0; }
}
</pre>

<td>
<pre>
.one {
  position: relative;
  left: 0px;
}
.two {
  position: relative;
  left: 500px;
  animate: "bounce" top 0.2s 5,
           linear left 1s once,
           "bounce" left 1s 1s infinite;
}
@profile "bounce"
  0% 0px,
  33% -20px,
  66% 20px,
  100% 0px;
</pre>


<td>3c: Same as 3b, but play the 'sway' animation (which takes 2s to run) continously between the two 'bounce' animations.
</table>

<h2 id=effect>The 'effect' property</h2>

<p>The 'effect' property accepts a comma-separated list of effects as
value. Each effect must contain on change() or play() function in
addition to optional other values. An effect is referred to as a
'change effect' or a 'play effect'. 

<p>The change() function takes a property name as value. A change effect
indicates that the specified property should be monitored; whenever it
changes, the change effect will be shown. The length of the change,
the delay of the change, and the timing function of the change can be
specified. For example, this declaration specifies that the change
should take 1s, there should be a 0.2s delay for both changes, and the
'ease-in' timing function should be applied:

<pre>
   effect: change(left) 1s 0.2s ease-in;
</pre>

<p>The play() function takes the name of an animation as value.
Animations are specified in separate @animation constructs. Unlike
change effects, play effects are not triggered by value changes other
properties, but rather by value changes on the 'effect' property
itself. When an element is assigned a new value on 'effect' property,
the value is examined and any effects set to start immediately are
started, while effects with delays are scheduled to be started later.
Further, any effect marked to start 'on-exit' on the previous value is
started. For example, this rule specifies that the 'bounce' animation
should be played twice: when the 'effect' value is first set, and when
the 'effect' value is reset the animation is played in reverse:

<pre>
  a:hover { 
    effect: play(bounce) 1s, 
      on-exit play(bounce) 1s reverse;
  }
</pre>

<p>The 'on-exit' can be considered to be a delay equal to 0.

<p>The 'reverse' keyword is offered as an alternative to the proposed
'alternate' keyword.

<p>The 'during' keyword is offered as an alternative to the proposed
'infinite' keyword.

<p>Otherwise, the values are the same as in
the <a href="http://dev.w3.org/csswg/css3-transitions/">transitions</a>, <a href="http://dev.w3.org/csswg/css3-animations/">animations</a>
proposal.


</table>