浏览器的颜色过渡效果

Question

我正在尝试实现一项基本任务，您将鼠标悬停在某个链接上并转换为颜色，反之亦然。我遇到的问题是每当我更改浏览器的大小时，受影响的文本响应速度会慢很多。我添加了一个媒体查询，它根据浏览器大小更改字体的百分比，所以我假设这与它有关。我创建了一个jsfiddle来向您展示问题。感谢

http://jsfiddle.net/mexicanbandit/vbc25Ly2/

html {
  font-size: 100%;
}

/* Medium screens ($mediumscreens) */
@media (min-width: 40rem) {
  /* line 26, ../sass/screen.scss */
  html {
    font-size: 112%;
  }
}
/* Large screens ($largescreens) */
@media (min-width: 64rem) {
  /* line 33, ../sass/screen.scss */
  html {
    font-size: 120%;
  }
}