Tenho uma página index.html
que contém um <p id="valor">
Que é atualizado através de uma WebSocket utilizando javascript.
Sempre que servidor envia a mensagem a função atualizar(valor)
é chamada:
function atualizar(valor) {
document.getElementById("valor").innerText = valor;
document.getElementById("valor").style.animation = "example 1s 1";
}
body {
background: #333;
}
#valor {
color: #FFFFFF;
font-family: "Trebuchet MS", Arial;
margin-top: 5px;
font-size: 36px;
font-weight: bold;
}
@keyframes example {
50% {
font-size: 45px;
}
100% {
font-size: 36px;
}
10%,
90% {
transform: translate3d(-1px, 0, 0);
}
20%,
80% {
transform: translate3d(2px, 0, 0);
}
30%,
50%,
70% {
transform: translate3d(-4px, 0, 0);
}
40%,
60% {
transform: translate3d(4px, 0, 0);
}
}
<input type="text" onblur="atualizar(this.value);" />
<p id="valor">Meu texto padrão</p>
A ideia é que sempre ao atualizar o valor ele faça com o texto um animação Scale e Shake Effect. O problema é que ele só funciona na primeira vez que a função é chamada.