Is it possible to transition text-alignment using CSS3 only?

问题

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

回答1:

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/

回答2:

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>

回答3:

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>

回答4:

You can align text to the right and increase the width of the container.

Here is an example: CodePen

HTML:

<div class="bg">
  <div class="name">Adam</div>
</div>

CSS:

.bg {
  background: black;
}
.name {
  color: white;
  text-align: right;
  width: auto;
  display: inline-block;
  -webkit-transition-property: width;
  -webkit-transition-duration: 2s;
}
.bg:hover .name {
  width: 100%;
}

回答5:

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.

来源：https://stackoverflow.com/questions/18235764/is-it-possible-to-transition-text-alignment-using-css3-only

标签

css3

css-transitions