CSS Tutorial: Simple Text Transitions with CSS3

With CSS3 comes some very fancy effects including text transitions that you can use to create a bit of animation and interest in your websites. Some CSS3 transitions work with pseudo classes to create an effect when a user hovers their mouse over a link or image. I will only be covering transition effects for links or text in this post.

What I mean when I talk about a text transition is something like this:

Hover Over Me!

See how the colors shift and change gradually? Good thing you can easily create a simple text transition like that with almost no code at all. Here’s the most basic text transition you can write in CSS:

a { 
   color: #888777; 
   -webkit-transition: color 1s ease-in;
   -moz-transition: color 1s ease-in;
   -o-transition: color 1s ease-in;
   -ms-transition: color 1s ease-in;
   transition: color 1s ease-in;
} 
a:hover {
   color: #668899;
}

The above chunk of shorthand code has a couple of things going on. First are the two link rules, one sets the styling for the general link, the other one sets the styling for the link when someone hovers over it. You’ll notice, rather obviously, that we’re applying the transition effect on the general link rule.

The Anatomy

When we declare a transition, we have to target the specific browsers that contain the functionality for it. In the above code, I’ve targeted three major browsers and I have a general “transition” declaration at the end. In this case, “-webkit-transition” refers to Webkit based browsers (Chrome, Safari). “-moz-transition” refers to Mozilla browsers (Firefox), -ms- is Internet Explorer, and “-o-transition” refers to Opera.

The four values in a transition declaration are the value to be transitioned, duration of the transition, type of transition, and transition delay.

For the value, we are declaring that the color should be affected here. For the duration, we are saying it should only last about a second. You can draw this number out longer, but a 5s transition for a hover over link can get pretty silly. Finally, we declare the type of transition, which in this case, is ease-in.

Breaking it Down

Let’s break down the above shorthand CSS declaration and view transition in its basic components. If we were to dissect the above chunk of code into its base elements, it would look like this:

a { 
   color: #888777;
   -webkit-transition-property: color;
   -webkit-transition-duration: 1s;
   -webkit-transition-timing-function: ease-in;
   -webkit-transition-delay: 0;

   -moz-transition-property: color;
   -moz-transition-duration: 1s;
   -moz-transition-timing-function: ease-in;
   -moz-transition-delay: 0;

   -ms-transition-property: color;
   -ms-transition-duration: 1s;
   -ms-transition-timing-function: ease-in;
   -ms-transition-delay: 0;

   -o-transition-property: color;
   -o-transition-duration: 1s;
   -o-transition-timing-function: ease-in;
   -o-transition-delay: 0;

   transition-property: color;
   transition-duration: 1s;
   transition-timing-function: ease-in;
   transition-delay: 0;
}

You can see how all the different declarations of transition work together now that they’re broken up from the shorthand declaration. However, I don’t really want to spend all day writing out my transitions in long chunks like that, so the short hand version is more efficient and works the same way.

Delays

Notice the addition of a “transition-delay” declaration that is set to 0 in the broken down declarations. You can use transition delay to tell an element to wait before beginning a transition. This allows you to stagger your effects for an interesting visual. To declare a delay in a shorthand declaration, simply add the delay value after the duration value. Like this:

a { 
   color: #888777; 
   -webkit-transition: color 1s 2s ease-in;
   -moz-transition: color 1s 2s ease-in;
   -ms-transition: color 1s 2s ease-in;
   -o-transition: color 1s 2s ease-in;
   transition: color 1s 2s ease-in;
}

The above chunk of code tells my link to wait two seconds before it starts to run the ease-in transition for my link. Not very practical for a link, but if you were working with multiple images or pop-ups, this could come in handy!

Types of Timing Transitions

Ease-in is only one of the timing transitions available. There’s a bunch more with W3 Documentation. Understanding and reading all that could take a full day. Here’s a quick run-down:

Ease: Begins an effect faster than it ends the effect (slower).
Ease-In-Out: Begins an effect slower than it ends the effect (faster).
Ease-In: Starts an effect slowly.
Ease-Out: Finishes an effect slowly.
Linear: Executes an effect at one speed.

Any one of these timing transitions can be substituted in for the above effect like this:

a { 
   color: #888777; 
   -webkit-transition: color 1s ease-in-out;
   -moz-transition: color 1s ease-in-out;
   -ms-transition: color 1s ease-in-out;
   -o-transition: color 1s ease-in-out;
   transition: color 1s ease-in-out;
} 
a:hover {
   color: #668899;
}

The above code will modify my link so that an ease-in-out timing transition will be applied to it instead of ease-in.

To add a level of complexity to your transitions, you can use the power of cubic beziers. Most of the time, if you’re just developing websites, you probably won’t need to mess with cubic beziers much. But, if you do and because I am barely competent with math (d’aww), I will let someone who is much better with numbers do the hard work to explain those. Check out The Art of Web for their excellent cubic bezier documentation.

There is also a super cool website where you can check out the various types of transitions and cubic beziers here: Cubic-Bezier

Transitions also work with images and can create some really cool effects. In fact, you can make entire slideshows with CSS transitions and images. But we’ll be covering that in another tutorial that’s coming soon!


Posted

in

by

Tags:

Comments

16 responses to “CSS Tutorial: Simple Text Transitions with CSS3”

  1. mavia qasim

    how to add text in it ???

    1. Hi Mavia,

      You can substitute the text in the tutorial with whatever you’d like so long as your html tag that wraps your custom text contains the right classes or ids with the appropriate CSS applied to it. So for example, if you had this in your HTML:

      <a class=”transitions” href=”#” rel=”nofollow”>This is some of my text.</a>

      And you had this in your CSS:

      a.transitions {
      color: #444;
      transition: color 0.3s ease-in-out;
      }

      a.transitions:hover {
      color: #6bb5ff;
      }

      Then any time someone hovers over the text, “This is some of my text” on your website, it will change color. Transitions can be applied to <p>, <span>, <h1-h6>, etc. as well so test it out. Hope that helps clarify some things.

  2. Carter

    Hello Khanh,

    So i’ve been playing with Transition recently and I’m trying to implement this on a front page to a site. The goal is to have a background image and state the company name. Then Transition to a new Image and message. I’ve accomplished all of this except for transitioning the text. I only seem to be able to start with text/image and fade out to a new background image minus any text.

    for instance, the submit button below. It changes color and shape, can i also change it to say something else other than submit? perhaps transition from “submit”, to “click me!”?

    I hope this question was clear.

    1. Hi Carter. Crystal clear :). I wrote up a quick CSS-only attempt at changing the text on CodePen using :Hover. I’m sure tweaking it a little to introduce a delay or timing it with animations will allow you to automate the text transition. You can check it out here: http://codepen.io/ironion/pen/WQbjPR

      It uses Content, :Before (holds initial text), :After (holds text that replaces initial text) and :Hover to swap out the text upon hovering over an element. This is done through manipulating the opacity of the text, where one gets its opacity turned down to 0% upon hover while the other gets its opacity turned up to 100%. It is a little bit on the “hacky” side, but it does accomplish what I think you were asking about.

      A more acceptable and probably elegant way to accomplish this would be through the use of jQuery to swap out the text. Here’s a JSFiddle that accomplishes that: http://jsfiddle.net/W47QV/4/

      I do plan to get into using jQuery to accomplish some more common and popular tasks such as text replacement and simple animations. But right now I’m working through JS Bonfires so that might be a long while before I get to it. I hope this was somewhat helpful to you in the mean time. ๐Ÿ™‚

  3. I used to think should drop the “transition” in element hover, it turns out I was wrong,

    learning time is the most valuable treasure.

    1. Thanks for dropping by and leaving a comment, Danny. When I was first starting out with transitions and playing around with them, I put them into the hover state too.

  4. Plz tell me about techniques and languages used in language translator like google translator

    1. Hi Avantika,
      I’m not sure if this is the right place for this kind of exploration and I’ve never done anything with Google Translate. If you want my best guess, they may have written the backend in C++ using a custom algorithm that compiles and compares one language’s text to another’s and stores that information for later use. It continues to build upon this bank of language information and uses statistics to even out the translation anomalies.
      It should be noted that I’m making a lot of guesses and assumptions and this is just my best estimate of what’s happening. I’m not the best person to answer this question, but you certainly made me curious on a Wednesday morning, thanks! ๐Ÿ™‚

  5. SID

    hey , can i knw how to add a hyperlink to a transition,i mean when the transition ends the page should be redirected to the hyperlink. Is it possible ?

    1. That’s possible, but if you’re looking for a delay you can probably do it with jQuery. Here’s a helpful post about it on StackOverflow:
      http://stackoverflow.com/questions/3032182/jquery-delay-a-link-from-being-followed

      1. SID

        Can’t you put it on your page with the kind of elaboration you gave for creating a button using css

        1. Hi SID, not sure if you’ll be back, but I do plan to start up some jQuery tutorials for this blog. Hopefully soon. I know how late I am in replying to this comment. I don’t know how it slipped off my radar for this long. ๐Ÿ™

  6. Beejay

    Pretty much what I was looking for, but sadly the color changes in the blink of an eye and not as desired within a second. Why not?

    1. It could be a number of things, including a typo, the HTML file not being linked to the stylesheet, or a browser incompatibility. Can you post your code for me?

  7. Alex

    This was really helpful thanks!

    1. No problem, Alex. Thanks for leaving a comment. ๐Ÿ˜€