CSS3 webkit-transition using multiple properties of a div and multiple webkit-transition-delay

Question

I'm trying to transform a div by sliding it 200px to the right and then reducing it's scale by half. I'd like to slide THEN reduce the scale of the div, however I can't get the 2 transforms to operate independently, it slides and rescales at the same time. I thought that webkit-transition-delay would fix this problem, but it only ever applies the last delay specified (in this example 2s) to both transforms. Any thoughts?

.example-3-transform {
            -webkit-transform: translate(200px) scale(0.5);
            -webkit-transition-property: webkit-transition-translate, webkit-transition-scale;
            -webkit-transition-duration: 1s, 1s;
            -webkit-transition-timing-function: ease-in-out, ease-in-out; 
            -webkit-transition-delay: 0s, 2s;
}

lfagundes · Accepted Answer · 2011-12-19 22:03:18Z

9

You can use a keyframe for that:

@-webkit-keyframes myanim {

  50% { -webkit-transform: translate(200px) scale(1) }
  100% { -webkit-transform: translate(200px) scale(0.5) }

}

.example-3-transform { -webkit-animation: myanim 5s 1 ease-in-out forwards }

the parameters are:

5s: duration of animation
1: repetition
ease-in-out: timing algorithm, can also be linear, ease-in, ease-out, or cubic-bezier with custom parameters
forwards: will keep the style in desired state after animation finishes.

edited Dec 19, 2011 at 22:03

answered Dec 19, 2011 at 18:25

lfagundes

3,0685 gold badges26 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

George Over a year ago

Thanks, this created the desired effect!

Collectives™ on Stack Overflow

CSS3 webkit-transition using multiple properties of a div and multiple webkit-transition-delay

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related