短代码中变换属性的转换

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

​