Add Typing Animation Effect To Blogger

This is one of my favorite effect, You must have seen cool .gif animation effects but this one is supercool because this Typing Animation is made with Pure CSS.

• Go To Blogger>>> Design>>>Edit HTML
• CTRL + F To Find ]]
• Copy n Paste Below Code Just Above/Before ]]

@-webkit-keyframes typing {
from { width: 0 }
to { width:16.3em }
}
@-moz-keyframes typing {
from { width: 0 }
to { width:16.3em }
}
@-webkit-keyframes blink-caret {
from, to { border-color: transparent }
50% { border-color: black }
}
@-moz-keyframes blink-caret {
from, to { border-color: transparent }
50% { border-color: black }
}
body { font-family: Consolas, monospace; }
h5 {
font-size:150%;
width:16.3em;
white-space:nowrap;
overflow:hidden;
border-right: .1em solid black;

-webkit-animation: typing 17s steps(30, end), /* # of steps = # of characters */
blink-caret 1s step-end infinite;
-moz-animation: typing 17s steps(30, end), /* # of steps = # of characters */
blink-caret 1s step-end infinite;
}

Add The HTML To Your Blogger :

• Copy N Paste Below HTML Code
• Where You Want To Show This Animation

Welcome to my blog!

If You Enjoyed This Post Please Take 5 Seconds To Share It.

Posted in: tricks