Is it possible to transition text-alignment using css3? For example, I'd like to animate text-alignment from left to right, however, adding a transition property on text-align doesn't do the trick.
2
-
4text-align is not an animatable propery: Animatable properties. If you can explain a bit more (maybe some pics?) what effect you are going for, someone may have an idea of how to accomplish it.dc5– dc52013-08-14 15:28:32 +00:00Commented Aug 14, 2013 at 15:28
-
1Thanks guys. Both are good workarounds for compensating for the fact that text-align is not an animatable property.Adam Soffer– Adam Soffer2013-08-14 16:47:00 +00:00Commented Aug 14, 2013 at 16:47
Add a comment
|
5 Answers
I found out a way of not only animating from left to right / right to left, but also from centered text.
The trick is to apply a width of '0'.
ul {
background: #fff;
padding: 16px;
border: 1px solid #e2e2e2;
}
li {
list-style: none;
letter-spacing: 1px;
font: 12px 'Tahoma';
line-height: 24px;
color: #444;
text-align: center;
white-space: nowrap;
width: 100%;
transition: width .8s ease;
}
ul:hover > li {
width: 0;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<ul>
<li>this</li>
<li>is a list</li>
<li>of entries</li>
<li>with various widths.</li>
<li>hover over it</li>
<li>to apply crazy css magic!</li>
</ul>
</body>
</html>
If I understand what you are going for, one way to do this is to change your layout a bit and animate left/right properties:
This takes advantage of overflow being visible by setting the right of the span element to the left hand side of the screen.
On hover, right is set to 0, transitioning the element across the screen.
Note: in this case, when transitioning back to the left, you do lose a bit of the easing as it is transitioning all the way to zero rather than the natural width of the text.
.bg {
background: black;
width: 100%;
height: 20px;
position: relative;
}
.name {
color: white;
left: 0;
position: absolute;
text-align: right;
right: 100%;
-webkit-transition-property: all;
-webkit-transition-duration: 2s;
}
.bg:hover .name {
position: absolute;
right: 0;
left: 0;
}<div class="bg">
<span class="name">Adam</span>
</div>
1 Comment
Nathan
Found this very useful, thanks. Also, adding whitespace:nowrap to the span will keep it to a single line (which was what I've needed to do)
You can align text to the right and increase the width of the container.
.name {
text-align: right;
width: 0px;
transition: width 2s;
/* needed for when the name is more than one word */
white-space: nowrap;
}
.bg:hover .name {
width: 100%;
}<div class="bg">
<div class="name">Hello world</div>
</div>
This is an old question but I recently had the same issue and found the answers here unsatisfying for my use case.
The biggest concern I have with the solution from dc5 is that it uses the slow position properties for animation which is bad for transitions as they require re-layouting and are not hardware-accelerated.
My solution is solely based on transform: transitionX() and leverages the fact that translate() is always based on the target element's width/height:
This is my solution:
setTimeout(function() {
$('.b').addClass('left');
}, 5000);.b {
transform: translateX(50%);
transition: transform ease-in-out 1000ms;
}
.c {
display: inline-block;
transform: translateX(-50%);
background: green;
transition: transform ease-in-out 1000ms;
}
.b.left,
.b.left .c {
transform: translateX(0%);
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="b">
<div class="c">CENTERED TEXT</div>
</div>
Comments
The way I do it is to simply use text-indent instead of text-align. You have to do trial/error a little to figure out the number of px, rem, em, %, or whatever where you want to move the item via text-indent.
.tsetup
{
text-indent:0;
transition: text-indent 150ms linear;
}
.tright
{
text-indent:50px; /* adjust me by trial and error */
}
So, I can add the tsetup class to my element. When I click it, I add the tright class. When I click it again, I remove the tright class. It does a nice gradual fade from left to right.
I use this technique with the FontAwesome fa-circle icon (content:"\f111";font-family:FontAwesome;) to make a checkbox toggle slider button.
