短代碼中轉換屬性的轉換

Question

我很困惑如何正確編寫代碼？

選項1：

.line-all { 
 
    -webkit-transition: 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); 
 
}

選項2：

.line-all { 
 
    -webkit-transition: transform 0.4s cubic-bezier(0.4, 0.01, 0.165, 0.99), -webkit-transform 0.4s cubic-bezier(0.4, 0.01, 0.165, 0.99), -ms-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), -webkit-transform 0.4s cubic-bezier(0.4, 0.01, 0.165, 0.99), -ms-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); 
 
}

選項3：

.line-all { 
 
    -webkit-transition: transform 0.4s cubic-bezier(0.4, 0.01, 0.165, 0.99), -webkit-transform 0.4s cubic-bezier(0.4, 0.01, 0.165, 0.99), -ms-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); 
 
}

任何其他選項來寫？或者哪一個是正確的從3以上去？

Answer 1

只是得到我的答覆，工作也很好地

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