adcionei um @keyframe:
Script:
let titulo = document.querySelector('.titulo').innerHTML = "Full Life Nutrição";
calculaImc()
function calculaImc(){
let pacientes = document.querySelectorAll('.paciente');
let imc = 0;
for (var i = 0; i < pacientes.length; i++){
let paciente = pacientes[i]
let tdPeso = paciente.querySelector(".info-peso");
let peso = tdPeso.textContent;
let tdAltura = paciente.querySelector('.info-altura');
let altura = tdAltura.textContent;
let tdImc= paciente.querySelector('.info-imc');
if(peso <= 0 || peso >= 450){
tdPeso.textContent = 'Peso Inválido';
tdPeso.classList.add('campo-invalido');
tdImc.textContent='Verifique o peso';
paciente.classList.add('paciente-invalido');
} else if(altura <= 1.10 || altura >= 3.00){
tdAltura.textContent = 'Altura Inválida';
tdAltura.classList.add('campo-invalido');
tdImc.textContent = 'Verfique a altura';
paciente.classList.add('paciente-invalido');
}else{
let imc = peso / (altura * altura);
imc = parseFloat(imc);
tdImc.textContent = imc.toFixed(2);
}
}
}
CSS com Keyframe:
adicionar-paciente{
margin-top: 30px;
}
@keyframes campo-invalido{
0%{opacity: 0;}
50%{opacity: 0.5;}
100%{opacity: 1;}
}
.campo-invalido{
background-color: rgb(224, 92, 92);
animation: campo-invalido 1.0s linear infinite;
}
.paciente-invalido{
background-color: rgb(205, 192, 8);
}