相关疑难解决方法(0)

我似乎找不到具有多个属性的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.所有供应商前缀都足够臃肿.还扩展了示例代码.

在CSS3转换结束后,如何将声明的属性应用于元素？我有类似的东西:

.something {
  background: blue;
  padding: 10px 0px;
  background-clip: content-box;
  transition: box-shadow 300ms;
}
.something:hover {
  box-shadow: 0px 0px 3px blue;
  padding: 0px;
  margin: 10px 0px;
}

我想在转换完成300ms后应用:hover声明中的padding和margin属性.

我试图在鼠标悬停时修改文本的颜色并进行多种颜色过渡，但我只能更改一种颜色。这是我的 CSS 片段。

#text       {font:9px 'Arial'; color:#000000; transition-duration: 3s;}\n#text:hover {color:#FFFFFF;}\n

不只是#000000到#FFFFFF，而是#000000\xe2\x86\ #FF0000x92 \xe2\x86 #0000FF\x92 \xe2\x86\x92#FFFFFF

如何在单个文本行上实现多个 CSS 颜色过渡？

我在悬停时使用CSS制作了简单的动画。我的问题是，当我先在动画中的框上悬停时不流畅，但动画出得流畅时。

因此，当我将鼠标悬停在该动画上时，需要使它平滑。

.zoom {
    display: flex;
    justify-content: center;
}

.zoom .box{
    padding: 16px;
    transition: transform .6s;
}

.zoom .box:hover {
    transform: scale(1.2);
    background-color: #BD8A3B;
    transition: background-color .6s ease;
}

.box {
    width: 200px;
    height: 600px;
    background-color: #DACDBD;
}

<section class="zoom">
            <div class="box">
                <span class="bold">Pwinw wjdnw wndi</span>
                <span class="number">5,5 % - 6,6%</span>
                <span class="light">dwjndwj dwjndw dw</span>
                <span class="bold">wdjwndk wdniwd knj</span>
            </div>
        </section>