如何避免动画延迟子元素动画？

Question

我有一个带插入符号的导航栏元素。当我将鼠标悬停在元素上时，我希望转动插入符号并改变整个元素的颜色。

只有Firefox显示确切的结果，而Safari显示相反的颜色，Chrome显示插入颜色更改的延迟。

注意：使用Bootstrap

Here is my Codepen

我的CSS和HTML如下：

#navigation a {
  color: rgba(0, 0, 0, 0.2);
  -webkit-transition: color .5s ease;
  -moz-transition: color .5s ease;
  -o-transition: color .5s ease;
  transition: color .5s ease;
}

#navigation a:hover {
  color: rgba(0, 0, 0, 1);
}

#trigger .caret {
  -webkit-transition: all .5s ease;
  -moz-transition: all .5s ease;
  -o-transition: all .5s ease;
  transition: all .5s ease;
}

#trigger:hover .caret {
  -webkit-transform: rotate(-90deg) translateX(1px);
  -moz-transform: rotate(-90deg) translateX(1px);
  -o-transform: rotate(-90deg) translateX(1px);
  transform: rotate(-90deg) translateX(1px);
}

.triggered {
  opacity: 0;
  visibility: hidden;

  transition: all .5s ease-out .5s;
  -webkit-transition: all .5s ease-out .5s;
  -moz-transition: all .5s ease-out .5s;
  -o-transition: all .5s ease-out .5s;
  transition: all .5s ease-out .5s;
}

#trigger:hover ~ .triggered {
  opacity: 1;
  visibility: visible;
}

.triggered:hover,
.triggered:hover ~ .triggered {
  opacity: 1;
  visibility: visible;
}

<header>
  <nav class="navbar navbar-default navbar-fixed-top">
    <div class="container">

      <div id="navigation" class="collapse navbar-collapse">
        <ul class="nav navbar-nav">

          <li id="trigger">
            <a>TRIGGER<span class="caret"></span></a>
          </li>

          <li class="triggered">
            <a>TRIGGERED 1</a>
          </li>
          <li class="triggered">
            <a>TRIGGERED 2</a>
          </li>
          <li class="triggered">
            <a>TRIGGERED 3</a>
          </li>

        </ul>
      </div>
    </div>
  </nav>
</header>