Как сделать так, чтобы мигание можно было воспроизводить несколько раз?

Question

[Егор]

При нажатии на кнопку, если введённые данные не подходят, их input должен мигать, но это происходит один раз. Если я второй раз нажму на кнопку, то ничего не произойдёт.
А, ну и также, как сделать так, чтобы мигал и сам текст внутри, а не только фон?

HTML:

<div class="info">
                    <h2>Информация</h2><br><br>
                    <input type="text" placeholder="Ник" id="nickinput">
                    <input type="text" placeholder="Почта" id="mailinput">
                    <button class="pay" id="paypreview" onclick="checkvalid()">Товар не выбран</button>
                </div>

CSS:

.info input#nickinput {
  margin-left: 350px;
  width: 260px;
  height: 30px;
  font-size: 20px;
  color: #bbb;
  font-family: "Arial Black";
  background-color: #303030;
  box-shadow: none;
  border-radius: 5px;
  border: 1px solid hsla(0,0%,100%,.12);
}

.info input#mailinput {
  margin-left: 350px;
  margin-top: 40px;
  width: 260px;
  height: 30px;
  font-size: 20px;
  color: #bbb;
  font-family: "Arial Black";
  background-color: #303030;
  box-shadow: none;
  border-radius: 5px;
  border: 1px solid hsla(0,0%,100%,.12);
}

.pay {
  margin-left: 350px;
  margin-top: 75px;
  width: 260px;
  font-size: 20px;
  color: #383838;
  font-family: "Arial Black";
  background-color: #f14141;
  box-shadow: none;
  border-radius: 5px;
  border: 1px solid hsla(0,0%,100%,.12);
}

@keyframes blinker {
  50% {
    background-color: #b11515;
  }
}

JavaScript:

let nickinput = document.querySelector("#nickinput");
let mailinput = document.querySelector("#mailinput");

function checkvalid() {
    let nickregex = /^\w{3,16}$/i;
    let validnick = nickregex.test(nickinput.value);
    let mailregex = /^[\w-\.]+@[\w-]+\.[a-z]{2,4}$/i;
    let validmail = mailregex.test(mailinput.value);
    if (validnick === false) {
        nickinput.style.animation = "blinker 0.6s linear 3";
    }
    if (validmail === false) {
        mailinput.style.animation = "blinker 0.6s linear 3";
    }
}

Answer 1

[alexalexes]

1. Сначала занулите свойство анимации. Потом вызовите setTimeout с нулевым временем, чтобы JS применил изменения анимации в DOM и внутри setTimeout добавьте свойство анимации. Тогда анимация перезапустится.

nickinput.style.animation = "none";
  setTimeout(function() {
    if (validmail === false) {
        mailinput.style.animation = "blinker 0.6s linear 3";
    }
    }, 0);

2. Задайте какой-нибудь color в ключевом кадре:

@keyframes blinker {
  50% {
    background-color: #b11515;
    color: #aaa;
  }
}

Comments

[Егор]

Получилось. А как можно поменять цвет placeholder'a?

[alexalexes]

Для color нужно подбирать сильно отличающийся цвет от #bbb, тогда она будет заметна.
Возможно, для текста нужен отдельный трек ключевых кадров, чтобы было побольше уровней перехода:

@keyframes blinker_text {
  25% {
    color: #999;
  }
  50% {
    color: #666;
  }
  75% {
    color: #333;
  }
}

В анимации она применяется дополнительным набором свойств:

mailinput.style.animation = "blinker 0.6s linear 3, blinker_text 0.6s linear 3";

Возможно, для анимации текста нужно применить другую временную функцию перехода, не linear.

[Егор]

Да, получилось поменять цвет, спасибо

Answer 2

[Роман Ракзин]

https://developer.mozilla.org/en-US/docs/Web/CSS/a...
если на чистом css animation-iteration-count: 2;