CSS3过渡只是规模

Question

A simple question.

When I hover the element, element should be scale. Working fine. Problem is I have some background colors also applying. I want to get rid of this background transition.

Following is my code.

.scale{
  -webkit-transition: all .2s ease-in-out;
  -moz-transition: all .2s ease-in-out;
  -o-transition: all .2s ease-in-out;
  transition: all .2s ease-in-out;
}

.scale:hover{
  -webkit-transform: scale(1.1);
  -moz-transform: scale(1.1);
  -o-transform: scale(1.1);
  transform: scale(1.1);
}

I have changes the transition-property to width, height, top, right, bottom, left

My pen http://codepen.io/anon/pen/yAGBj

Answer 1

Change your transition to only affect the desired CSS properties rather than all :

transition: transform .2s ease-in-out;

CodePen demo .

Answer 2

As I mentioned in the comment above, just add the background:red in your scale:hover class.

.scale:hover{
-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
-o-transform: scale(1.1);
transform: scale(1.1);
background:red;
}

DEMO