CSS transition of the transform property but with different modes

Question

I have a button that has a scale and a rotation effect on it when its hovered on. I want to achieve these effects but with different durations. Basically, I want to achieve something like this

.button {    
   transition: transform 0.1s;/* scale should be .1s and rotate should be .5s*/
}
.button:hover {
   box-shadow: 0px 0px 2px 4px rgb(105, 64, 64);
   transform: scale(1.111, 1.111) rotate(360deg);
}

Any short hand way of doing this? Is this even possible?

conceptual example

.button{
  transition[scale]: .1s;
  transition[rotate]: .5s
}

edit: actually, the already present solutons are for 2 different properties (height and opacity), while mine is on a single property (transform) , but transform has 2 modes, rotate and scale, which need to be animated with different timing. I need transform:rotate with .5s and transform:scale with .1s

edit 2: someone mentioned the use of animation, so this is what I did

@keyframes anim1 {
        0%{
          transform: rotate(0deg);
        }
        50%{
          transform: rotate(180deg);
        }
        100%{
          transform: rotate(180deg);
        }
      }
      @keyframes anim2 {
        0%{
          transform: scale(1,1);
        }
        50%{
          transform: scale(1.111,1.111);
        }
        100%{
          transform: scale(1,1);
        }
      }
.button{
animation: anim1 3s ease-in-out, anim2 5s ease-in-out;
}

This method firstly autoplays the animation, and secondly and more importantly, the second animation overrides the first and I am left with only scale and no rotation. But If someone can make this code work, its great either way !

user_6831341 · Answer

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);
}


  
    
      
        Hover me!

CSS transition of the transform property but with different modes

1 Answers