Menu
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.
http://codepen.io/anon/full/lGDwB
693
CSS transitions provide a way to control animation speed when changing CSS properties. Instead of having property changes take effect immediately, you can cause the changes in a property to take place over a period of time.
text-align is not an animatable propery: Animatable properties.
The text-align property in CSS is used to specify the horizontal alignment of text in an element ie., it is used to set the alignment of the content horizontally, inside a block element or table-cell box.
So what are transforms and transitions? At their most basic level, transforms move or change the appearance of an element, while transitions make the element smoothly and gradually change from one state to another.
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>https://jsfiddle.net/q5kLcfkx/4/
99
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:
Working CodePen
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>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
