Skip to main content

Fun with Html 5 transitions

A very easy enhancement for html 5 is CSS3 transitions. These are extremely easy to do. A lot of the tutorials accomplish some pretty big tasks that would normally be handled with quite a bit of javascript. However, some of the things that get overlooked are some of the small, simple details. Even a nice fade effect for showing and hiding something.

What I've done here on the site is that all links transition from a white border (that you don't see) to animate an underline and color shift.

Note that the transition animation is set to animates "all" properties, employ a 0.35 second animation time, and use ease-in-out for easing.

The CSS for the normal links:

  1. * a {
  2.   color: #2c92b7;
  3.   text-decoration: none;
  4.   border-bottom: 1px solid #FFF; 
  5.   -webkit-transition: all 0.35s ease-in-out;
  6.   -moz-transition: all 0.35s ease-in-out;
  7.   -o-transition: all 0.35s ease-in-out;
  8.   -ms-transition: all 0.35s ease-in-out;	
  9.   transition: all 0.35s ease-in-out;
  10. }

The CSS for the hover links:

  1. a:hover  {
  2.   color: #258;
  3.   text-decoration: none;
  4.   border-bottom: 1px solid #258;
  5. }

Note: The current versions of Chrome (17.*) have a bug which means that transitions do not get executed for "visited" links. This has been resolved in version 18. See issue here.

Comments

For those who are in love or

For those who are in love or have entered the marriage hall of the woman, mulberry handbags the year looking forward to more days, such as birthday, love anniversary, marriage anniversary, engagement anniversary, wedding anniversary. If there is a man can remember more than three of you on the day, you will be happy to fly up! a lot of gifts to be sent a year can not Every time to send the same, a little confused man might ruined the mood, in fact, some people say that gifts important mind is not expensive, but the reality is often not the same, of course, this is just part of the situation, love needs to surprise louis vuitton handbags to stimulate , Need to freshness to fresh.

Finally a tutorial of my

Finally a tutorial of my needs,I have been looking for some Html 5 transitions to get with my essaywriter,Gladly I found it here,This was an exceptional article to read,Thanks you for sharing it with us

Oh well I've been playing

Oh well I've been playing with HTML 5 because of web design colorado lately so yeah I know how the transition elements could work although this script's more efficient.

It is very nice post

It is very nice post according to my view and I will keep in touch with this place. Webi Logo

A great things you have

A great things you have shared with us mcaden! I am pleased to visit at this place form where wonderful information can be collected for enhancing knowledge. Generally I recommend reading like these kinds of blog post because I am a developer and a lots of project of ecommerce website development or designing I have done. So I attempt to increase my knowledge through reading various types of content. Before leaving this site I would like to share the post to all my friends who even desire to get information like these.

Post new comment

The content of this field is kept private and will not be shown publicly.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Allowed HTML tags: <a> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd>
  • Lines and paragraphs break automatically.
  • You can enable syntax highlighting of source code with the following tags: <asp>, <c>, <cpp>, <cs>, <css>, <drupal5>, <drupal6>, <html4strict>, <java>, <javascript>, <jquery>, <php>, <python>, <ruby>, <sql>, <xml>. The supported tag styles are: <foo>, [foo]. PHP source code can also be enclosed in <?php ... ?> or <% ... %>.

More information about formatting options

By submitting this form, you accept the Mollom privacy policy.