I am developing a JavaScript console, in which when user types a mand and presses enter, the console does it.

One thing I was not able to figure out is how can one animate text in an input field. The input field will already have a value in itself, which I want to animate.

I can animate text with CSS animations for normal text, but that does not seem to work for input. Please check out this fiddle for the CSS text animation. If there were a way to animate text in input with CSS, it would be preferable.

Thus, could someone hint or suggest me any ways on how to achieve what I want?

Thanks a lot.

I am developing a JavaScript console, in which when user types a mand and presses enter, the console does it.

One thing I was not able to figure out is how can one animate text in an input field. The input field will already have a value in itself, which I want to animate.

I can animate text with CSS animations for normal text, but that does not seem to work for input. Please check out this fiddle for the CSS text animation. If there were a way to animate text in input with CSS, it would be preferable.

Thus, could someone hint or suggest me any ways on how to achieve what I want?

Thanks a lot.

• javascript
• css
• animation
• console

3 Answers 3

I have e up with a javascript logic which animates a particular text inside an input text field. Hope this answers your question.

var value = "Typing animation";
value.split("").forEach(function(elem, index){
  setTimeout(function(){
  $("input[type='text']").val($("input[type='text']").val()+elem);
}, index* 750); 
$("input[type=text]").focus();
}); 

Check following fiddle.

JSFiddle

You can try with an overlay over your input, and fill the actual text of the input after the animation finishes with some java script.

<div>
    <input type="text" value="Some text"></input>
    <span>Some text</span>
</div>

div{position:relative;}
span { 
    ...your h1 stuff here...
    position:absolute;
    left:2px;
}
input {font: bold 200% Consolas, Monaco, monospace;}

So I think you're probably looking for something like this?

https://jsfiddle/bv9onx6x/16/

That is going to listen for the onkeypress and then the JavaScript will fire and set the inner html of the new <h1> to whatever value is in the textbox.