Animate a Title

Posted on 2016-11-06
Last Modified: 2016-11-08
Hi Experts,

Using CSS only (I'm taking a CSS Course), how can I animate in a title (h1), one character at a time, into the desired position?

Thank you.
Question by:APD_Toronto
  • 4
  • 2
LVL 54

Expert Comment

by:Julian Hansen
ID: 41876645
Blind links deleted

Please refer to EE policy on posting links to off site content (

Posts with links to OSC should contain enough commentary for the post to stand on its own.


Author Comment

ID: 41877636
Hi Julian, I don't believe I posted any links

Expert Comment

by:Andrew Derse
ID: 41877882
It's possible, but my approach will probably hurt your SEO as the title tag would be hidden while the animation is occurring.

Here's how I would do it:

1) Have the <h1> text as hidden, but on the screen in the end position desired.
2) Break out each letter in it's own div or span.
3) Animate that span using css animation
4) Once everything is lined up, turn off all of the divs/spans and turn on <h1> tag.

Just 1 approach.
3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.


Author Comment

ID: 41878086
I know what you mean, but how can I both set left: -200px then transform left 30px

Can you give me an example perhaps "Hi" or "Hey"

Author Comment

ID: 41878087
I  mean, I dont think that you have a pseudo-selector like span:onbodyload?

Accepted Solution

Andrew Derse earned 500 total points
ID: 41878781
Correct, most of the time this is easily accomplished with javascript or jQuery.  I prefer jQuery. So when page loads you can manipulate the css through the jQuery calls. I personally wouldn't do it purely with css, I would use jQuery to help.

Author Comment

ID: 41878950
I know how to do it with jQuery, but this is a CSS course. Can you help me out?

Featured Post

DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
Use these top 10 tips to master the art of email signature design. Create an email signature design that will easily wow recipients, promote your brand and highlight your professionalism.
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

778 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question