###Exemplo em puro `javascript`:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

    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';
      });
    }

<!-- language: lang-css -->

    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);
      }
    }

<!-- language: lang-html -->

    <input type="text" onblur="atualizar(this.value);" />

    <div id="valor">Meu texto padrão</div>

<!-- end snippet -->


----------

###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 evento `onClick` 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:


- [How to restart CSS Animation with minimal impact][1]
- https://stackoverflow.com/a/47074584/5626568


  [1]: https://stackoverflow.com/questions/47073747/how-to-restart-css-animation-with-minimal-impact