Как убрать задержку при наведении курсора на <a>

Question

Как убрать задержку из .btn href при наведении, но я хочу задержку для трех разных .btn, показывающих построчно, поэтому я установил задержку любого решения для этого типа проблем.Проблемы возникают, когда вы наводите курсор мыши на тег, затем я меняю цвет фона и цвет при наведении курсора, но эффект отображения был очень поздним из-за задержки.Когда вы удаляете задержку, то работаете нормально при наведении, меняете быстрый цвет и цвет фона.

* {
                box-sizing: border-box;
            }
            .btn-action {
                width: 990px;
                margin: 0 auto;
                display: block;
            }
            .box {
                width: 300px;
                height: 300px;
                background-color: gray;
                display: inline-block;
                float: left;
                margin: 0 15px;
                text-align: center;
                padding: 20px;
            }
            .btn {
                border: 0;
                background-color: #1b1b1b;
                color: #fff;
                min-width: 1px;
                margin: 0 4px;
                display: inline-block;
                border-radius: 4px;
                width: 37px;
                height: 37px;
                text-align: center;
                vertical-align: middle;
                font-size: 14px;
                padding: 0;
                line-height: 38px;
                opacity: 0;
                transform: translateY(15px);
                -moz-transform: translateY(15px);
                -webkit-transform: translateY(15px);
                -ms-transform: translateY(15px);
                transition-property: transform, opacity;
                -moz-transition-property: transform, opacity;
                -webkit-transition-property: transform, opacity;
                -ms-transition-property: transform, opacity;
                transition: all 0.2s ease-in-out;
                -moz-transition: all 0.2s ease-in-out;
                -webkit-transition: all 0.2s ease-in-out;
                -ms-transition: all 0.2s ease-in-out;
                -o-transition: all 0.2s ease-in-out;
            }
            .box:hover .btn {
                opacity: 1;
                transform: translateY(0px);
                -moz-transform: translateY(0px);
                -webkit-transform: translateY(0px);
                -ms-transform: translateY(0px);
            }
            .btn:nth-child(1) {
                -webkit-transition-delay: 0.1s;
                -moz-transition-delay: 0.1s;
                -o-transition-delay: 0.1s;
                transition-delay: 0.1s;
            }
            .btn:nth-child(2) {
                -webkit-transition-delay: 0.2s;
                -moz-transition-delay: 0.2s;
                -o-transition-delay: 0.2s;
                transition-delay: 0.2s;
            }
            .btn:nth-child(3) {
                -webkit-transition-delay: 0.3s;
                -moz-transition-delay: 0.3s;
                -o-transition-delay: 0.3s;
                transition-delay: 0.3s;
            }
            .btn:hover {
                background-color: #fff;
                color: #000;
            }

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<section class="btn-action">
            <div class="box">
                <a href="#" class="btn">
                    <i class="fa fa-cart-arrow-down" aria-hidden="true"></i>
                </a>
                <a href="#" class="btn">
                    <i class="fa fa-eye" aria-hidden="true"></i>
                </a>
                <a href="#" class="btn">
                    <i class="fa fa-heart-o" aria-hidden="true"></i>
                </a>
            </div>
            <div class="box">
                <a href="#" class="btn">
                    <i class="fa fa-cart-arrow-down" aria-hidden="true"></i>
                </a>
                <a href="#" class="btn">
                    <i class="fa fa-eye" aria-hidden="true"></i>
                </a>
                <a href="#" class="btn">
                    <i class="fa fa-heart-o" aria-hidden="true"></i>
                </a>
            </div>
            <div class="box">
                <a href="#" class="btn">
                    <i class="fa fa-cart-arrow-down" aria-hidden="true"></i>
                </a>
                <a href="#" class="btn">
                    <i class="fa fa-eye" aria-hidden="true"></i>
                </a>
                <a href="#" class="btn">
                    <i class="fa fa-heart-o" aria-hidden="true"></i>
                </a>
            </div>
        </section>

Answer 1

transition-property переопределяется transition: all 0.2s ease-in-out;, попробуйте использовать:

  transition: transform 0.2s ease-in-out,
              opacity 0.2s ease-in-out;

, вместо этого это должно решить вашу проблему с задержкой изменения цвета.

Кроме того, я бы посоветовал неиспользуйте all, это может замедлить повторную визуализацию страницы.

Answer 2

Добавить задержку только для преобразования и непрозрачности.

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

* {
  box-sizing: border-box;
}

.btn-action {
  width: 990px;
  margin: 0 auto;
  display: block;
}

.box {
  width: 300px;
  height: 300px;
  background-color: gray;
  display: inline-block;
  float: left;
  margin: 0 15px;
  text-align: center;
  padding: 20px;
}

.btn {
  border: 0;
  background-color: #1b1b1b;
  color: #fff;
  min-width: 1px;
  margin: 0 4px;
  display: inline-block;
  border-radius: 4px;
  width: 37px;
  height: 37px;
  text-align: center;
  vertical-align: middle;
  font-size: 14px;
  padding: 0;
  line-height: 38px;
  opacity: 0;
  transform: translateY(15px);
  transition: 
   all 0.2s ease-in-out, /*we first define all*/
   /*then we redifine for transfrom,opacity*/
   transform 0.2s ease-in-out var(--s, 0s), 
   opacity 0.2s ease-in-out var(--s, 0s);
}

.box:hover .btn {
  opacity: 1;
  transform: translateY(0px);
}

.btn:nth-child(1) {
  --s: 0.1s;
}

.btn:nth-child(2) {
  --s: 0.2s;
}

.btn:nth-child(3) {
  --s: 0.3s;
}

.btn:hover {
  background-color: #fff;
  color: #000;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<section class="btn-action">
  <div class="box">
    <a href="#" class="btn">
      <i class="fa fa-cart-arrow-down" aria-hidden="true"></i>
    </a>
    <a href="#" class="btn">
      <i class="fa fa-eye" aria-hidden="true"></i>
    </a>
    <a href="#" class="btn">
      <i class="fa fa-heart-o" aria-hidden="true"></i>
    </a>
  </div>
  <div class="box">
    <a href="#" class="btn">
      <i class="fa fa-cart-arrow-down" aria-hidden="true"></i>
    </a>
    <a href="#" class="btn">
      <i class="fa fa-eye" aria-hidden="true"></i>
    </a>
    <a href="#" class="btn">
      <i class="fa fa-heart-o" aria-hidden="true"></i>
    </a>
  </div>
  <div class="box">
    <a href="#" class="btn">
      <i class="fa fa-cart-arrow-down" aria-hidden="true"></i>
    </a>
    <a href="#" class="btn">
      <i class="fa fa-eye" aria-hidden="true"></i>
    </a>
    <a href="#" class="btn">
      <i class="fa fa-heart-o" aria-hidden="true"></i>
    </a>
  </div>
</section>

Вот без CSS-переменных:

* {
  box-sizing: border-box;
}

.btn-action {
  width: 990px;
  margin: 0 auto;
  display: block;
}

.box {
  width: 300px;
  height: 300px;
  background-color: gray;
  display: inline-block;
  float: left;
  margin: 0 15px;
  text-align: center;
  padding: 20px;
}

.btn {
  border: 0;
  background-color: #1b1b1b;
  color: #fff;
  min-width: 1px;
  margin: 0 4px;
  display: inline-block;
  border-radius: 4px;
  width: 37px;
  height: 37px;
  text-align: center;
  vertical-align: middle;
  font-size: 14px;
  padding: 0;
  line-height: 38px;
  opacity: 0;
  transform: translateY(15px);
  transition: 
   all 0.2s ease-in-out, /*we first define all*/
   transform 0.2s ease-in-out, /*then we redifine for transfrom,opacity*/
   opacity 0.2s ease-in-out;
}

.box:hover .btn {
  opacity: 1;
  transform: translateY(0px);
}

.btn:nth-child(1) {
  transition-delay:0s, 0.1s,0.1s;
}

.btn:nth-child(2) {
  transition-delay:0s, 0.2s,0.2s;
}

.btn:nth-child(3) {
  transition-delay:0s, 0.3s,0.3s;
}

.btn:hover {
  background-color: #fff;
  color: #000;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<section class="btn-action">
  <div class="box">
    <a href="#" class="btn">
      <i class="fa fa-cart-arrow-down" aria-hidden="true"></i>
    </a>
    <a href="#" class="btn">
      <i class="fa fa-eye" aria-hidden="true"></i>
    </a>
    <a href="#" class="btn">
      <i class="fa fa-heart-o" aria-hidden="true"></i>
    </a>
  </div>
  <div class="box">
    <a href="#" class="btn">
      <i class="fa fa-cart-arrow-down" aria-hidden="true"></i>
    </a>
    <a href="#" class="btn">
      <i class="fa fa-eye" aria-hidden="true"></i>
    </a>
    <a href="#" class="btn">
      <i class="fa fa-heart-o" aria-hidden="true"></i>
    </a>
  </div>
  <div class="box">
    <a href="#" class="btn">
      <i class="fa fa-cart-arrow-down" aria-hidden="true"></i>
    </a>
    <a href="#" class="btn">
      <i class="fa fa-eye" aria-hidden="true"></i>
    </a>
    <a href="#" class="btn">
      <i class="fa fa-heart-o" aria-hidden="true"></i>
    </a>
  </div>
</section>