CSS Transition opacity not effecting with rgba color

Why opacity transition is not effecting on hover, if i just put opacity separately as .4 in text class it works, but it doesn't work with 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>

Solution

You need to set color for transition, once you change opacity within color attribute

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>