Question

我似乎找不到具有多个属性的CSS转换简写的正确语法。这没有做任何事情：

.element {
  -webkit-transition: height .5s, opacity .5s .5s;
     -moz-transition: height .5s, opacity .5s .5s;
      -ms-transition: height .5s, opacity .5s .5s;
          transition: height .5s, opacity .5s .5s;
  height: 0;
  opacity: 0;
  overflow: 0;
}
.element.show {
  height: 200px;
  opacity: 1;
}

我用javascript添加show类。元素变得更高且可见，它不会过渡。在最新的Chrome，FF和Safari中进行测试。

我做错了什么？

编辑：为了清楚起见，我正在寻找速记版本来缩小我的CSS。所有供应商前缀都足够臃肿。还扩展了示例代码。

Answer 1

语法：

transition: <property> || <duration> || <timing-function> || <delay> [, ...];

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

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

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

这是a straightforward example。这是另一个with the delay property。

此前列出的

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

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

如果您仍想确定，请参阅http://caniuse.com/css-transitions

Answer 2

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

.myclass {
    transition: all 200ms ease;
    transition-property: box-shadow, height, width, background, font-size;
}

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

Demo

Answer 3

我使用它：

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

Answer 4

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

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

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

Answer 5

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

// 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'类中的所有过渡属性（持续时间，过渡计时功能等）

Answer 6

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

element{
   transition: all .3s;
   -webkit-transition: all .3s;
   -moz-transition: all .3s;
   -o-transition: all .3s;

CSS过渡速记有多个属性？

6 个答案: