CSS3 Transition on Scale Only

CSS Transition for only one type of transform?

Yes! Now you can, because translate, scale and rotate have been moved to a separate css properties! (MDN: translate, scale, rotate)

So now you can do:

div{
   scale: 1;
   translate: 0;

   transition: scale 0.4s;
}

div.clicked{
   scale: 2;
   translate: 100px 200px; 
}

Example: http://jsfiddle.net/bjkdthr5/1/ (only scale will animate)

Css3 transition on scale only

You've got your

-webkit-transition: -moz-transform .3s ease-out; 
-moz-transition: -webkit-transform .3s ease-out; 

switched. I have to assume that's the problem.

CSS3 transition only scale

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

Transition only one kind of transform at a time in CSS

As you're overwriting your non-hover transform value on hover with the rotate, your arm gets positioned to its original position (like when there wouldn't be any translate on it).

As you can set multiple values for the transform property, just also add the translate on hover to it. This will keep your arm on the right position and just rotates it.

/* INITIAL PLACING OF THE IMAGES IN THEIR RIGHT PLACES */img#Arm {  position: relative;  transform: translate(220px, 100px);}
img#Body {  position: relative;  transform: translate(150px, 180px);}/* END OF PLACING OF THE IMAGES IN THEIR RIGHT PLACES */
/* THESE ARE THE TRANSFORMATIONS ON HOVER */img#Arm {  transform-origin: 200px 200px;  transition: 1s ease-in-out;}
section:hover img#Arm {  transform: translate(220px, 100px) rotate(25deg);}/* END OF TRANSFORMATIONS ON HOVER */
/* THIS IS TO KEEP THE LOGO PARTS GROUPED TOGETHER DESPITE WINDOW CHANGING RESOLUTIONS */section.wrapper {  margin: 0 auto;  /* this keeps the logo centered on the page */  min-width: 800px;  /* Minimum width of your wrapper element */  max-width: 800px;  min-height: 800px;  max-height: 800px;}

<section class="wrapper">  <img id="Arm" src="https://i.stack.imgur.com/yCC87.png" />  <img id="Body" src="https://i.stack.imgur.com/mmzDM.png" /></section>

CSS transition only one transform function

I played around with your code a little and YES you can. Just assign the different transform functions to different classes and use only those classes that you want...like so.

Importantly DO NOT FORGET to use the respective browser supported engines when using animations to make it work. Here is a list of various browsers supporting various animation features.

http://css3.bradshawenterprises.com/support/

.my-class {
    transition: transform;
}

.scale_and_rotate {
    -webkit-transform: scale(2) rotate(90deg);
    -moz-transform: scale(2) rotate(90deg);
    -ms-transform: scale(2) rotate(90deg);
    -o-transform: scale(2) rotate(90deg);    
}

.scale_class {
    -webkit-transform: scale(2); // Safari and Chrome(Engine:-Webkit)
    -moz-transform: scale(2); // Mozilla(Engine:-Gecko)
    -ms-transform: scale(2); // IE(Engine:-Trident)
    -o-transform: scale(2); // Opera(Engine:-Presto)
}

.rotate_class {
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    -o-transform: rotate(90deg);
}

and finally you can apply these classes depending on your requirements

<div class="my-class"></div>
<div class="my-class scale_class"></div> // only scale function
<div class="my-class rotate_class"></div> // only rotate function
<div class="my-class scale_and_rotate"></div> // both scale and rotate function

Check the JSFiddle here

If you want to scale and rotate together then the class given by you should work.
And also you can look into CSS @keyframes to achieve this. Here are few good tutorials

https://developer.mozilla.org/en-US/docs/Web/CSS/@keyframes

http://coding.smashingmagazine.com/2011/05/17/an-introduction-to-css3-keyframe-animations/

Smooth CSS Transform Scale on rectangle, keeping an even border

You can try using box shadow as a border to achieve smooth transitions.

.rectangle {    position: relative;    width: 300px;    height: 300px;    top: 100px;    left: 30%;}
.background {    position: absolute;    width: 100%;    height: 100%;    top: 0;    left: 0;    right: 0;    bottom: 0;}
.background::before {  content: '';  position: absolute;  top: 0;  left: 0;  right: 0;  bottom: 0;  box-shadow: 0 0 0 0px #000;  transition: 5s linear box-shadow;}
.content {    height: 300px;    width: 200px;}
.rectangle:hover .background::before {    box-shadow: 0 0 0 20px #000;    transition: 5s linear box-shadow;}

<div class="rectangle">    <div class="background"></div>    <div class="content">blah</div></div>

---

Related Topics