• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 104
  • Last Modified:

Animate a Title

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.
0
APD Toronto
Asked:
APD Toronto
  • 4
  • 2
1 Solution
 
Julian HansenCommented:
Blind links deleted

Please refer to EE policy on posting links to off site content (http://support.experts-exchange.com/customer/portal/articles/1162518)

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

JulianH
0
 
APD TorontoAuthor Commented:
Hi Julian, I don't believe I posted any links
0
 
Andrew DerseIT ManagerCommented:
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.
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

 
APD TorontoAuthor Commented:
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"
0
 
APD TorontoAuthor Commented:
I  mean, I dont think that you have a pseudo-selector like span:onbodyload?
0
 
Andrew DerseIT ManagerCommented:
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.
0
 
APD TorontoAuthor Commented:
I know how to do it with jQuery, but this is a CSS course. Can you help me out?
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

  • 4
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now