Как сделать мигающий элемент?

Здравствуйте.
Есть красный элемент "HOT"

есть класс hot которым он выводится

<li class="hot"><a href="shop.html">Bestseller Products</a></li>

и есть css класс который заставляем мигать элемент если его применить к нужному элементу.

.blink {
  animation: blink 2s infinite; /* Параметры анимации */
 }
 @keyframes blink {
  from { opacity: 1; /* Непрозрачный текст */ }
  to { opacity: 0; /* Прозрачный текст */ }
 }

Как применить класс blink, чтоб мирцал сам красный лейбл hot?
Если делаю так, то мирцает hot вместе ссылкой.

<li class="hot blink"><a href="shop.html">Bestseller Products</a></li>