css过度绑定多个属性,CSS过渡速记有多个属性？

6 个答案:

答案 0 :(得分：640)

语法：

transition: || || || [, ...];

请注意，如果指定了后者，则持续时间必须在延迟之前。

个人过渡以速记声明结合：

-webkit-transition: height 0.3s ease-out, opacity 0.3s ease 0.5s;

-moz-transition: height 0.3s ease-out, opacity 0.3s ease 0.5s;

-o-transition: height 0.3s ease-out, opacity 0.3s ease 0.5s;

transition: height 0.3s ease-out, opacity 0.3s ease 0.5s;

或者只是将它们全部过渡：

-webkit-transition: all 0.3s ease-out;

-moz-transition: all 0.3s ease-out;

-o-transition: all 0.3s ease-out;

transition: all 0.3s ease-out;

此前列出的

编辑是关于transition的兼容性和已知问题。删除以方便阅读。

底线：只需使用它。对于所有应用程序而言，此属性的性质不会中断，并且全球的兼容性现在远高于94％。

答案 1 :(得分：361)

如果您想要以相同的方式转换几个特定属性(因为您还有一些想要转换的属性，比如opacity)，另一个属性选项是做这样的事情(为简洁省略前缀)：

.myclass {

transition: all 200ms ease;

transition-property: box-shadow, height, width, background, font-size;

}

第二个声明覆盖了它上面的简写声明中的all，并且(偶尔)使代码更简洁。

答案 2 :(得分：13)

我使用它：

element{

transition : height 3s ease-out, width 5s ease-in;

}

答案 3 :(得分：2)

这帮助我了解/简化了动画所需的内容：

// SCSS - Multiple Animation: Properties | durations | etc.

// on hover, animate div (width/opacity) - from: {0px, 0} to: {100vw, 1}

.base {

max-width: 0vw;

opacity: 0;

transition-property: max-width, opacity; // relative order

transition-duration: 2s, 4s; // effects relatively ordered animation properties

transition-delay: 6s; // effects delay of all animation properties

animation-timing-function: ease;

&:hover {

max-width: 100vw;

opacity: 1;

transition-duration: 5s; // effects duration of all aniomation properties

transition-delay: 2s, 7s; // effects relatively ordered animation properties

}

}

〜这适用于'.base'类中的所有过渡属性(持续时间，过渡计时功能等)

答案 4 :(得分：2)

通过在转换不透明度属性时延迟.5s，元素在其高度转换的整个时间内将完全透明(因此不可见)。所以你唯一能看到的就是不透明度的变化。因此，您将获得与将高度属性保留在转换之外相同的效果：

“过渡：不透明度.5s .5s;”

这就是你想要的吗？如果没有，并且您想要查看高度转换，则在转换的整个过程中不能具有零不透明度。

答案 5 :(得分：-4)

我认为这可以解决这个问题：

element{

transition: all .3s;

-webkit-transition: all .3s;

-moz-transition: all .3s;

-o-transition: all .3s;