不同的过渡到正文和内容

Question

我四处看了看，但找不到解决办法。

如何用body覆盖#wait, #about和a的转换?我希望字体大小调整得更快。

谢谢。

body {
  font-family: Arial;
  font-size: 10vw
}
body {
  -webkit-transition: font .2s ease;
  -moz-transition: font .2s ease;
  -o-transition: font .2s ease;
  transition: font .2s ease;
}
#wait,
#about,
a {
  -webkit-transition: all .6s ease;
  -moz-transition: all .6s ease;
  -o-transition: all .6s ease;
  transition: all .6s ease;
}

<div id="wait">
  <div id="about">
    1 2 3 4 <a href="#">5</a> 6 7 8 9 0
  </div>
</div>

Answer 1

#wait,
#about,
a {
  -webkit-transition: all .2s ease !important;
  -moz-transition: all .2s ease !important;
  -o-transition: all .2s ease !important;
  transition: all .2s ease !important;
}

当你想重写css而样式不适用时，在样式代码的末尾使用!important

Answer 2

您可以使用!important.

    -webkit-transition: all .2s ease !important;

如果你把它放在body上，那么它将覆盖其他样式。

Answer 3

您可以使用单个transition属性指定2个或多个逗号分隔的transition:

#wait {
  font-size: 5vw;
  transition: all 2s ease, font .2s ease;
}
#wait:hover {
  font-size: 10vw;
  color: red;
}

<p id="wait">
  TEEEST
</p>