html - CSS3 トランジション フラッシュ

Question

なぜこれが起こっているのか誰にも分かりますか？

すべてのアンカーで、次のものがあります。

-webkit-transition: all .2s ease-in-out;
-moz-transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;

なぜその「フラッシュ」が発生するのですか？

アップデート

フラッシュとは、H1 が紫から白に変わる場所を意味します。

更新 2

ほとんどすべてのアンカー リンクで発生するようです。

ロゴの例では、HTML は次のとおりです。

<h1 class="logo"><a href="/">Test</a></h1>

私が持っているCSSで：

a {
  text-decoration: none;
  color: white;
  -webkit-transition: all .2s ease-in-out;
  -moz-transition: all .2s ease-in-out;
  -o-transition: all .2s ease-in-out;
  transition: all .2s ease-in-out;
}

h1 はヘッダーにあり、ヘッダーにはヘッダー リンク用の特定の CSS があります。

.header a {
  color: white;
  text-shadow: 0 -1px rgba(0,0,0,0.2);
}

そして、h1 については、次のとおりです。

h1 {
  margin: 0;
  float: left;
  font-family: "proxima-nova";
  font-size: 26px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 2px;
  height: 30px;
  line-height: 30px;
}