Animating Text Using CSS

Question

How do you animate the text position smoothly. On hover, I want to re-position the text from text-align: center to text-align: left.

From this state:

Initial state

To this state:

enter image description here

When I change the text-align on a :hover selector, the transition isn't smooth. It just jumps to the left alignment.

div.subject > div.subjectHeader {
height: 200px;
width: 100%;
color: white;
font-family: 'Lato', 'Helvetica', sans-serif;
font-weight: 700;
font-size: 1.8em;
box-sizing: border-box;
text-align: center;
vertical-align: middle;
line-height: 200px;
transition: all 0.7s cubic-bezier(0.4,0,0.2,1);
-moz-transition: all 0.7s cubic-bezier(0.4,0,0.2,1);
}

div.subject:hover > div.subjectHeader {
    height: 30px !important;
    line-height: 30px !important;
    font-size: 1.5em !important;
    text-align: left !important;
    padding-left: 10px !important;
}

Here is the jsfiddle: Link to jsfiddle

How do you expect us to help you effectively when you haven't posted the code you're currently using? — esqew
– esqew, Commented Jul 28, 2014 at 19:17
I don't think you can animate text-align using css transitions. See stackoverflow.com/questions/18235764/… — nullability
– nullability, Commented Jul 28, 2014 at 19:28

Community · Accepted Answer · 2017-05-23 10:26:14Z

4

The text-align property is not animatable, so CSS transitions will not be applied to it.

One possible workaround involves positioning your text inside a div absolutely and animating the left property instead. For example, modify your header HTML like this:

<div class="subjectHeader"><span class="subjectHeaderInner>Chemistry</span></div>

Then animate the CSS of .subjectHeaderInner using the left and margin properties. Don't change text-align as there's no way to animate that property. For example:

div.subject .subjectHeaderInner {
    width: 200px;
    position: absolute;
    left: 50%;
    margin-left: -100px;
    -moz-transition: all 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}
div.subject:hover .subjectHeaderInner {
    left: 0;
    margin-left: 0;
}

I updated your fiddle with this code: http://jsfiddle.net/kAPtL/5/

Other workarounds are possible depending on what kind of effect you want. There are some examples at Is it possible to transition text-alignment using CSS3 only?

edited May 23, 2017 at 10:26

CommunityBot

11 silver badge

answered Jul 28, 2014 at 19:40

nullability

10.7k3 gold badges47 silver badges64 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

DirkJan Over a year ago

Can you kindly edit the fiddle for a working example?

DirkJan Over a year ago

Very nice! Just what I was looking for! Thanks but the text is off-centered? Have you noticed?

nullability Over a year ago

My example was meant to illustrate a general solution. You will have to tweak it to meet your needs.

Jaime Gomez · Accepted Answer · 2014-07-28 20:11:20Z

Edit: Slightly better, since the closing animation can't be done with precision (without knowing the text length), I made it simpler but at least it doesn't look that bad.

This is an alternative that works pretty well, almost perfect I would say. The most notable trick is using white-space: nowrap to play with the box dimensions effectively.

HTML layout:

<div>
    <h1>
        <span>Some Title</span>
    </h1>
    <p>some cool explanation</p>
    <p>more explanation</p>
</div>

CSS that delivers the magic:

div { border: 5px solid black; height: 18em; padding-top: 2em; position: relative; width: 20em; }
div:hover h1 { height: 1.2em; }
div:hover span { right: 10em; padding-top: 0; }
h1 { bottom: 0; height: 20rem; margin: 0; top: 0; width: 20rem; }
p { padding: 10px; }
span { font-size: 1em; left: 0; padding-top: 4em; position: absolute; right: 0; text-align: center; white-space: nowrap; }
h1, span { background: green; position: absolute; transition: all .3s ease; }

JSFiddle example

Collectives™ on Stack Overflow

Animating Text Using CSS

2 Answers 2

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related