在短代码中转换 属性
transition on transform property in short code
我对如何正确编写这段代码感到困惑?
选项 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 开始哪一个是正确的?
刚刚得到我的答案并且工作也很好
.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);
}
我对如何正确编写这段代码感到困惑?
选项 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 开始哪一个是正确的?
刚刚得到我的答案并且工作也很好
.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);
}