Animating Text Using CSS - html

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:
To this state:
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

Answer 1

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?

Answer 2

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