почему моя анимация CSS отстает на мобильном?

Question

Я только что создал эту анимацию на своем сайте.в основном это должно заставить логотип светиться.

Я попробовал это на реальном мобильном устройстве, и он очень медленный и медленный.Вот CSS, отвечающий за анимацию, это очень просто:

.portfolio_item {
  border-radius: 6px;
  transition: all 0.3s ease;
}

.portfolio_item img {
  filter: drop-shadow(0px 0px 1px #eee) grayscale(100%);
  transition: all 0.3s ease;
  max-width: 300px;
  margin: 0 auto;
  display: block;
  transition: all 0.3s ease;
}

.portfolio_item:hover img {
  filter: drop-shadow(0px 0px 200px #eee) grayscale(0%);
}

Вот ссылка на сайт, чтобы вы могли попробовать сами http://ayadighaith.com/