Make a cool swiping animation for your sub-domain title

Hello, friends. If you have already seen a collapsing tittle below in the demo at the very starting of this page, you  have been pleasantly wanting to do this type of title on your own website or blog. Now we are going to see that cool animation that you can use it as a title of your sub domains at a side of your logo. This is a short article giving you a direct CSS and HTML code.
So, first take a look at demo.
1.1 DEMO

Note:Please view the demo in Jsfiddle by clicking of above link.

1.2 HOW TO DO
This will finely work to you if your title is so big and can be collapsed in to short forms.For example,Facebook Developers.Facebook will collapsed into FB and developers will be come out behind that.
As seen in the demo ,there is android logo.Change with yours.Now feed your data into <span> and <h1>.Text inside <span> tag will remain as it is whereas, text inside <h1> tag will be collapse.

1.3 WHATS INSIDE THE CODE?
In this code,there has been made a pure use of CSS3 and HTML , using animation collapse.@Keyframes are simple.As they change width of <h1> tags.Overfow is made hidden as it will didn't show collapsed text.

1.4 WHATS NEXT?
I'm waiting for you to make a very better animation than this by modifying this fiddle, upgrade and comment me in comment section below.Good Bye and don't forget to check out my other articles!

• Tweet
• Share
• Share
• Share
• Share