CSS 过渡不透明度不影响 rgba 颜色

Question

为什么 opacity 过渡不影响 hover，如果我只是将不透明度作为 .4 单独放在文本 class 中，它可以工作，但它不起作用rgba opacity.

ul {
  list-style:none
}

li {
  padding-bottom:15px;
 }
.text {
  color:rgba(13,19,13,.4); // here is initial opacity .4
  transition: opacity 2s cubic-bezier(.4,1,.2,1);
}

.text:hover {
  opacity:.9
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  
  <ul>
    <li><a href="#" /><span class="text">Item</span></li>
    <li><a href="#" /><span class="text">Item</span></li>
    <li><a href="#" /><span class="text">Item</span></li>
    <li><a href="#" /><span class="text">Item</span></li>
    <li><a href="#" /><span class="text">Item</span></li>

</ul>
</body>
</html>

Answer 1

这是解决方案，在 .text 中 class 为不透明度提供单独的属性。

ul {
  list-style:none
}

li {
  padding-bottom:15px;
 }
.text {
  color:rgba(13,19,13,0.4);
  transition: opacity 2s cubic-bezier(.4,1,.2,1);
}

.text:hover {
  cursor:pointer;
  color:rgba(13,19,13,0.9);
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  
  <ul>
    <li><href=""a /><span class="text">Item</span></li>
    <li><href=""a /><span class="text">Item</span></li>
    <li><href=""a /><span class="text">Item</span></li>
    <li><href=""a /><span class="text">Item</span></li>
    <li><href=""a /><span class="text">Item</span></li>

</ul>
</body>
</html>

Answer 2

仅使用 opacity 而不是 color 不透明度

ul {
  list-style: none
}

li {
  padding-bottom: 15px;
}

.text {
  opacity: .4;
  transition: opacity 2s cubic-bezier(.4, 1, .2, 1);
}

.text:hover {
  opacity: .9
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>

<body>

  <ul>
    <li>
      <href="" a /><span class="text">Item</span></li>
    <li>
      <href="" a /><span class="text">Item</span></li>
    <li>
      <href="" a /><span class="text">Item</span></li>
    <li>
      <href="" a /><span class="text">Item</span></li>
    <li>
      <href="" a /><span class="text">Item</span></li>

  </ul>
</body>

</html>

使用 color opacity

ul {
  list-style: none
}

li {
  padding-bottom: 15px;
}

.text {
  color: rgba(13, 19, 13, .4);
  transition: color 2s cubic-bezier(.4, 1, .2, 1);
}

.text:hover {
  color: rgba(13, 19, 13, .9);
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>

<body>

  <ul>
    <li>
      <href="" a /><span class="text">Item</span></li>
    <li>
      <href="" a /><span class="text">Item</span></li>
    <li>
      <href="" a /><span class="text">Item</span></li>
    <li>
      <href="" a /><span class="text">Item</span></li>
    <li>
      <href="" a /><span class="text">Item</span></li>

  </ul>
</body>

</html>

Answer 3

您需要设置 color 进行过渡，一旦您在颜色属性中更改不透明度

ul {
  list-style:none
}

li {
  padding-bottom:15px;
  font-size: 2em;
 }
.text {
  color:rgba(13,19,13,.4);
  transition: color 2s  cubic-bezier(.4,1,.2,1);
}

.text:hover {
  color: rgba(13,119,13,.9);
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  
  <ul>
    <li><a href=""><span class="text">Item</span></a></li>
    <li><a href=""><span class="text">Item</span></a></li>
    <li><a href=""><span class="text">Item</span></a></li>
    <li><a href=""><span class="text">Item</span></a></li>
    <li><a href=""><span class="text">Item</span></a></li>

</ul>
</body>
</html>

Answer 4

在过渡时使用 color 属性，在 :hover 时使用 color:rgba(13,19,13,0.9);

ul {
  list-style:none
}

li {
  padding-bottom:15px;
 }
.text {
  color:rgba(13,19,13,0.4);
  transition: color 2s cubic-bezier(.4,1,.2,1);
}

.text:hover {
  color:rgba(13,19,13,0.9);
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  
  <ul>
    <li><a href="#" /><span class="text">Item</span></li>
    <li><a href="#" /><span class="text">Item</span></li>
    <li><a href="#" /><span class="text">Item</span></li>
    <li><a href="#" /><span class="text">Item</span></li>
    <li><a href="#" /><span class="text">Item</span></li>

</ul>
</body>
</html>

CSS 过渡不透明度不影响 rgba 颜色

CSS Transition opacity not effecting with rgba color

css

opacity

css-transitions