Clever Geek Handbook

CSS3 Transition Bar Only

Simple question.

When I find an element, the element should be scaled. Works fine. The problem is I have some background colors. I want to get rid of this background transition.

Below 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 change the transition property to width, height, top, right, bottom, left

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

+3


source to share


3 answers


As I mentioned in the comment above, just add background:red

to your class scale:hover

.

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


DEMO

0


source


Change yours transition

to only affect the required CSS properties, not all

:

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


Demo version of CodePen .

+2


source


Change all

to transform

:

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


source






More articles:


All Articles