Re: [css3-animations] dynamic changes to animation properties or keyframes

On Thu, 1 Dec 2011 08:31:42 -0800, "Tab Atkins Jr." <jackalmage@gmail.com> wrote:
> On Thu, Dec 1, 2011 at 5:04 AM, Øyvind Stenhaug <oyvinds@opera.com> wrote:
> > I can think of two main approaches. Using
> >
> > @keyframes name { foo }
> > #test { animation: name 1s, name 2s }
> >
> > as an example:
> >
> > a) Behave similarly to
> >
> > @keyframes name1 { foo }
> > @keyframes name2 { foo }
> > #test { animation: name1 1s, name2 2s }
> >
> > b) Behave similarly to
> >
> > @keyframes name { foo }
> > #test { animation: name-that-matches-no-at-rule 1s, name 2s }
> >
> > Where option a) seems kind of nice (can effectively have multiple animations
> > re-using the same @keyframes rule).
> 
> (a) is effectively equivalent to (b), since a later animation
> manipulating the same property as an earlier animation wins.  The only
> difference is when you're measuring the start or end of transitions
> via the JS events.

No, a previous animation may be visible during the animation-delay
period:

  <style>
  @keyframes move {
    from { left:   0px; }
    to   { left: 100px; }
  }

  div {
    animation-name:          move,    move;
    animation-duration:        2s,      2s;
    animation-delay:           0s,      3s;
  }

  div {
    width: 100px;
    height: 100px;
    background-color: blue;
    position: relative;
  }
  </style>
  <div></div>

The example would give me two movements with model (a) and one movement
with model (b). I prefer the former.

David