How can I specify a "Transition" value to be animated when using "Transform"?

Question

IN THE css, we can use the property transition to define a transition effect when some of the properties of an element are changed.

Example:

.box{
    transition: all 1s linear;
    background-color: purple;
    height: 200px;
    box-sizing:border-box;
}

.box:hover{
    background-color: #add555;
    box-shadow: 0 0 10px 10px #000 inset;
}

<div class='box'></div>

In the above case, I used the option all, where all properties are affected by transition.

However, it is also possible to define which and how some properties are changed.

For example:

.box:hover{
     transition: opacity 2s linear, background-color .2s ease;
 }

Note that I have defined only opacity and background-color in the above example.

But I have a problem.

I have a div I wish to enliven your appearance through transform: scale(1). But that same div has a property inside transforming, which is translate(-50%, -50%).

Thus:

.box{
  height: 100px;
  background-color: pink;
  position:fixed;
  width:200px;
  height:200px;
  left: 50%;
  top: 50%;
  transform: scale(1) translate(-50%, -50%); 
  transition: transform 1s linear;
  
 }

.box:hover{
      transform:scale(0) translate(-50%, -50%);
 }

<div class="box"></div>

I need to cheer up the transform, but only the scale, I don’t want to animate the translate. Can you do it in css?

Because after I added Translate, the animation didn’t turn out the way I wanted it to. In this case, it has to look something like this:

.box{
  height: 100px;
  background-color: pink;
  position:fixed;
  width:200px;
  height:200px;
  left: 30%;
  top: 30%;
  transform: scale(1); 
  transition: transform 1s linear;
  
 }

.box:hover{
      transform:scale(0);
 }

<div class='box'></div>

Note that in this example above, the scale caused the object to decrease to the center, not to the right side.

How can I do this in css?

Answer 1

If I understand correctly, you would like to personalize the Scale in one way and the Translate in another correct?

You can do this through keyframes, you define each keyframe the way you want, and after that through Animation you say how each should animate.

.box{
    height: 100px;
    background-color: pink;
    position:fixed;
    width:200px;
    height:200px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);  
}

.box:hover{
    animation: animateScale 5s linear, animateTransform 2s linear;
}

@keyframes animateScale {
    0% { transform: scale(1); } 
    100% { transform: scale(0); }
}

@keyframes animateTransform {
    100% { transform: translate(-50%, -50%); }
}

and if you wish to animate only one you create one, and say that only this one will animate

.box{
    height: 100px;
    background-color: pink;
    position:fixed;
    width:200px;
    height:200px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);  
}

.box:hover{
    animation: animateScale 5s linear;
}

@keyframes animateScale {
    0% { transform: scale(1); } 
    100% { transform: scale(0); }
}

And within each @keyframe {} you can give as many commands as you want

@keyframes animateScale {
    0% { transform: scale(1); } 
    100% { 
             transform: scale(0);
             background-color: red;
         }
}

I guess that solves :D

Answer 2

Try to use

transform-origin: bottom right;

Answer 3

Try something with Transition-Property:

div {
    -webkit-transition-property: width, height; /* Safari */
    transition-property: width, height;
}

or define more specific rules:

.box>div {...} /** seleciona apenas a primeira div filha de .box **/