具有多个属性的CSS过渡简写?


519

我似乎找不到具有多个属性的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的简写版本。使用所有供应商前缀已经足够enough肿。还扩展了示例代码。



3
您实际上是否更改了高度和不透明度的值?否则,它们不会改变
yunzen 2012

我不太熟悉CSS转换- 打算使用double .5sopacity吗?
BoltClock

该文档未提供使用具有多个属性的速记版本的示例。高度从0变为200像素,不透明度从0变为1。第二个.5s是不透明度过渡的延迟。我想一个元素的高度增长,以及时完成,褪色进去。
格雷戈里Bolkenstijn

2
嗯,是延迟值。
BoltClock

Answers:


751

句法:

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;

这是一个简单的例子。这是另一个具有delay属性的对象


编辑:先前在此处列出的是与的兼容性和已知问题transition。出于可读性原因删除。

底线:使用它。对于所有应用程序而言,此属性的性质均不中断,并且兼容性目前在全球范围内已远远超过94%。

如果仍要确定,请参阅http://caniuse.com/css-transitions


1
你有尝试过吗?它对我不起作用。我也不能使用all属性,因为我在第二个属性上有延迟。
Gregory Bolkenstijn 2012年

3
使用all而不是列出特定属性有什么性能/内存/其他含义?例如,如果我打算转型backgroundcolor唯一的-我是最好同时指定,或者只是使用all?另外-鉴于IE6-9不支持过渡,而IE10不带前缀支持过渡-包含ms-transition:指令是否有上行/下行的空间?
mattstuehler 2013年

9
转换所有属性而不是仅转换所需属性时,肯定会对性能产生影响。如果您有很多元素同时转换所有属性,则可能会造成严重损坏。大约ms-transition,我不知道任何原因,因为IE10已经发布,为什么有人仍然会使用它ms-transition而不是标准transition。两者都不会造成任何麻烦,但是,特别是在过渡过渡的样式表上,这会使您的CSS膨胀。更重要的是,文件大小也会受到影响。
雷米·布雷顿

3
我遇到了同样的问题,但使用“过渡:不透明度1s .5s,最大高度.5s 0”似乎不起作用,而使用“过渡:不透明度1s .5s,最大高度.5s 0s”却不起作用。我第一次看到CSS中零值所需的单位!
mlarcher 2013年

5
值得指出的是,使用“ all”比指定特定属性要慢。
弥敦道

433

如果您有想要以同样的方式过渡几个特定的属性(因为你也有你特别一些属性并不想转型,比方说opacity),另一种选择是做这样的事情(略去了前缀):

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

第二个声明会覆盖其all上方的简短声明中的,并(有时)使代码更简洁。

/* prefixes omitted for brevity */
.box {
    height: 100px;
    width: 100px;
    background: red;
    box-shadow: red 0 0 5px 1px;
    transition: all 500ms ease;
    /*note: not transitioning width */
    transition-property: height, background, box-shadow;
}

.box:hover {
  height: 50px;
  width: 50px;
  box-shadow: blue 0 0 10px 3px;
  background: blue;
}
<p>Hover box for demo</p>
<div class="box"></div>

演示版


4
这很有用!不仅是因为transition-property覆盖,而且还因为例如transition-delay需要在速记之后指定(至少在webkit中)。换句话说,速记意味着a transition-delay为0,并在速记将其设置回0之前放置了一个独立的延迟
。– duncanwilcox

您可以transition: [props] [duration] [easing] [delay] 在每种现代浏览器中使用@duncanwilcox
Jason

9
比接受的答案更喜欢此答案。
Erutan409

3
可爱!真的很喜欢这个方法!
wasddd_

36

我这样做的:

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

这就是我想要的-多个属性的简写。谢谢!
亚当·莫萨

2

通过在过渡不透明度属性时延迟0.5秒,元素在整个高度过渡期间将完全透明(因此不可见)。因此,您真正看到的唯一一件事就是不透明度发生变化。因此,您将获得与将height属性保留在过渡之外相同的效果:

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

那是你想要的吗?如果不是这样,并且您想查看高度转换,则在转换的整个过程中,透明度都不能为零。


这也不起作用,因为在不透明度过渡期间高度将保持为0。
Xesau,2015年

0

这帮助我理解/简化了动画,只需要动画即可:

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

我认为这工作:

element{
   transition: all .3s;
   -webkit-transition: all .3s;
   -moz-transition: all .3s;
   -o-transition: all .3s;
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.