Re: [css3-transitions] Adding keyframes to transitions

On Wed, Apr 7, 2010 at 12:47 PM, Perry Smith <pedzsan@gmail.com> wrote:
> I would like to see an additive effect so, if I have a "wobble" animation
> that alters left back and forth over time coupled with a transition that
> moves from right to left, then the result would be a wobbled slide.  Not a
> wobble with a sudden jerk to the final position.

I've got no problem with such a concept, there just isn't a way to do
that with keyframes right now.  I totally think it's *possible* to
augment keyframes to do so, though.  I believe this can be done easily
enough as an extension to the current Animations draft, though, and
doesn't *need* to be specified right now.  In other words, I don't
think we need to change our current design ideas to accommodate making
relative animations, or animations that can refer to both the start
and end state, in the future.


> I have a dumb question: in the case of left, top, right, bottom -- if the
> element has a position: static, then animations (and transitions for that
> matter) on those properties will have no effect.  Is that right?  Is that
> what we want?

Yeah, it's what we want.  There's no need to change how CSS works.
You can either relpos the element, or use transforms as Simon says.


> It would be nice if I could have an animation put the element into relative
> position mode, wiggle it around, and then put it back in to static position
> mode.

You can do that.

@keyframes wiggle {
  from {
    position: relative;
    left: 0;
  }
  50% {
    position: relative;
    left: 100px;
  }
  to {
    position: relative;
    left: 0;
  }
}

You have to specify relpos on each keyframe, or else it will take the
element's 'natural' position value.  At the end of the animation,
though, it stops manipulating the values, and they all turn back to
their 'natural' values automatically.

~TJ

Received on Wednesday, 7 April 2010 21:45:32 UTC