What Transition-Property to Use for Transform

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)

CSS transition Property not working with Transform

Including the show class on the box right off the bat will not show any animation. If you use setInterval (For demonstration purposes), you will see that the animation works.

//Toggle the class every second
setInterval(function(){ 
    document.getElementById('box').classList.toggle('show');
}, 1000);

.box{
  padding: 15px;
  height: 60px;
  width: 200px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: blueviolet;
  margin: 20px;
  border-radius: 20px;
  transform: translateX(10%);
  transition: transform 1s ease-in-out;
  font-family: sans-serif;
}

.box.show{
    transform: translateX(0);
}

<!-- will animate since the show class is added after the initial render -->
<div id="box" class="box">I'm a box with show class added after initial render lt;/div>

<!-- Will not animate, the show class will determine it's initial transform -->
<div class="box show">I'm a box with show already added lt;/div>

Css transition-property: transform only?

As discussed in the comments you should try to avoid using transition: all as it can slow down performance. Try to be as specific as possible with your transitions.

Also, move your transition from 2D to 3D by using translate3d(x,y,z) instead of translateX(x) to make use of hardware acceleration when enabled/available.

CSS transition of the transform property but with different modes

As noted in the comments, this can be achieved with wrapping containers. It is not the desired behavior you stated of using a single container, but unfortunately as of Dec 2020 that syntax is not supported. Below is a rough POC showing this in action:

.wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.animate-scale {    
   transition: transform 0.1s;
}
.animate-scale:hover {    
   transform: scale(1.111, 1.111);
}
.animate-rotate {    
   transition: transform 0.5s;
}
.animate-rotate:hover {    
   transform: rotate(360deg);
}

.button {
   box-shadow: 0px 0px 2px 4px rgb(105, 64, 64);
}

<div class="wrapper">
  <div class="animate-scale">
    <div class="animate-rotate">
      <span class="button">
        Hover me!
      </span>
    </div>
  </div>
</div>

How to apply a CSS transition only to the transform property

You can use transition: transform 1s;

That is shorthand for:

transition-property: transform;
transition-duration: 1s;

For prefixes, you need:

-webkit-transition: -webkit-transform 1s;
/* etc, for each possibility */

transition on transform property in short code

just got my answer and working well also

.line-all {  -webkit-transition: -webkit-transform 0.4s cubic-bezier(0.4, 0.01, 0.165, 0.99);  transition: transform 0.4s cubic-bezier(0.4, 0.01, 0.165, 0.99);}
.animated .line-all {  -ms-transform: translate(0px, 3px) rotate(-45deg);  -webkit-transform: translate(0px, 3px) rotate(-45deg);  transform: translate(0px, 3px) rotate(-45deg);}

CSS 3 : Correct transition-property for translate operation

In your transform: translate(250px, 0px) declaration, the property is called transform and the value of that property is the translate(250px, 0px) function.

The correct value of transition-property is therefore transform:

#div1 {
    width:30px;
    height:30px;
    background-color:green;
    cursor:pointer;
    transition: transform 0.5s ease;
}

Updated fiddle

$('#div1').on('click', function () {    $(this).toggleClass('pushObject');});

#div1 {    width:30px;    height:30px;       background-color:green;    cursor:pointer;    -webkit-transition: -webkit-transform 0.5s ease;    -moz-transition: -moz-transform 0.5s ease;    -o-transition: -o-transform 0.5s ease;    transition: transform 0.5s ease;}#div1:hover {    background-color:red;}
.pushObject {    transform: translate(250px, 0px);    -webkit-transform: translate(250px, 0px);    -ms-transform: translate(250px, 0px);    -o-transform: translate(250px, 0px);    -moz-transform: translate(250px, 0px);}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script><div id="div1"></div>

Setting transition value for specific transform property

The problem is how to maintain one transform of an element while transforming another in a pseudo element.

There appears to be no way of telling transform to 'inherit' some properties. A way of getting round this is to put the element in a container and give that the transform properties that we wish to be 'inherited'.

So in the given example:

#container {
           position: relative;
           top:100px; /* just so we can see the div when rotated */
           width: 100px;
           height: 20px;
           background-color: cyan;
           transform: rotate(90deg);
}
#element {  
           width: 100px; /* dimensions put in just so we can see the div */
           height: 20px;
           background-color: cyan;
           transition: scale 10s;
    }
#element:hover {
           transform: scale(1.1);
    }

<div id="container">
  <div id="element"></div>
</div>

---

Related Topics