Alex Rivera | Logout

When you scale an element with css3, what transition-properties are being changed?

Asked 2013-07-25T18:07:51.967
8

Which css transition property is actually used when you use the css property:

.selector {
  transform: scale(n);
}

I'm trying to isolate which values are actually changing when I scale something with CSS. This works, but it is also animating everything, which I don't want to do. I only want to animate the height/width of the object:

.selector {
  transition: all 0.3s linear;
}

Instead of 'all', I have tried settings 'width height', but it doesn't smoothly animate anymore. It just snaps to the final position.

css css-transitions css-animations
Edit
Report

1 Answer

8

You can use transform

transition: transform 200ms linear;

You need the vendor prefixes in that too like this

-webkit-transition: -webkit-transform 200ms linear;

I didn't fully understand your question but I'm guessing you just want to animate the scale and nothing else on that element, if so then this is what you need.

answered 2013-07-25T18:59:22.823

Your Answer