Re: transitions vs. animations

On Wed, Apr 7, 2010 at 5:19 PM, Håkon Wium Lie <howcome@opera.com> wrote:
> Perry Smith wrote:
>
>  > > How would you like to fill in the empty boxes?:
>  > >
>  > >   http://people.opera.com/howcome/2010/ta/index.html
>  >
>  > For case 2b and 2c, I think Tab's ideas now work by adding the
>  > animation to what I call the "unadorned" selector (i.e. the foo
>  > selector in your example).  I believe you would want the "play-in"
>  > concept so it plays when it transitions to that state but does not
>  > play when the page is first drawn.
>
> I'd love to add a column with Tab's proposals. Anther tab, so to say :)

1a:

foo {
  color: red;
  transition: color 1s;
}

foo:hover {
  color: green;
}

1b:

foo {
  color: red;
  transition: color 1s;
}

foo:hover {
  color: green;
  transition: color .8s;
}

2a:

foo:hover {
  play-in: bounce 1s;
}

2b:

foo:hover {
  play-in: bounce 1s;
  play-out: bounce 1s;
}

2c:

foo:hover {
  play-in: bounce 1s;
  play-out: bounce reversed 1s;
  /* or whatever, I don't care how keyframes are reversed, as long as
they *can* be reversed */
}

3a:

.one {
  position: relative;
  left: 0px;
}

.two {
  position: relative;
  left: 500px;
  play-in: bounce .2s 5;
}

3b:

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

.two {
  position: relative;
  left: 500px;
}

/* I suspect this expresses the notion that you want, where it's
supposed to bounce *while* moving. */
/* Also, assuming you mean "the class changes from one to two", rather
than "unhovered". */

3c:

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

.two {
  position: relative;
  left: 500px;
  play-during: sway 1s 1s;
}

/* Delay added to make it wait until the transition is done. */

~TJ

Received on Thursday, 8 April 2010 01:01:11 UTC