###Exemplo em javascript
puro:
function atualizar(valor) {
textBox = document.getElementById("valor");
textBox.innerText = valor;
requestAnimation(textBox);
}
var requestAnimation = function(obj) {
obj.style.animation = 'none';
window.requestAnimationFrame(function() {
obj.style.animation = 'example 1s';
});
}
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>
###Observações:
- A função
requestAnimation
será utilizada para fazer uma nova requisição de animação - Com isso sua animação e não ficará mais travada e pode ser executada quantas vezes quiser
- Para exemplificar de forma simples nesse caso utilizei o evento
onBlur
- Para testar basta mudar o texto e tirar o foco da caixa de texto que a animação começará
- Se quiser colocar em outro evento, por exemplo, no clique do mouse
- Basta chamar a função
atualizar(valor)
no eventoonClick
do botão - Não esquecer de capturar o valor do seu
input
usando outra estratégia - Observe que para o exemplo funcionar coloquei um fundo escuro pois sua fonte é branca
###Referência: