CODEWITHSUNDEEP
csscss-transitionscss-transforms
yuan
yuan

Reputation: 2120

Can I specify the transform attribute in transition?

The most usually case would be like this: 

    transition: background-color 0.2s,
                transform 1s;

but I want to specify which transform attribute that is controlled by the transition ,like

transition: transform scale 1s,
            transform skew 0.5s,
            transform rotate 2s;

I tried this, it didn't work.

Upvotes: 3

Views: 59

Answers (1)

לבני מלכה
לבני מלכה

Reputation: 16251

Use animation instead transition and set time of all(1s+0.5s+2s) and in @keyframes divide it to time you want to set for each transform property

div{
  width: 100px;
  height: 100px;
  background: red;
}
div:hover{
 animation: move 2.5s;
}
    @keyframes move {
      0% {
        transform: scale(3);
      }
      35% {
        transform: scale(3) skew(180deg); 
      }
      50%{
       transform: scale(3) skew(180deg) rotate(70deg); 
      }
    }
<div></div>

Upvotes: 2

Related Questions