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

前端未结

关注

 5  1888

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-al

相关标签:

5条回答

感情败类

2020-12-05 10:44
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.
0 讨论(0)
发布评论:

提交评论
- 加载中...

盖世英雄少女心

2020-12-05 10:55

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/

0 讨论(0)

暖寄归人

2020-12-05 11:01
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>
```
0 讨论(0)
发布评论:

提交评论
- 加载中...
Happy的楠姐

2020-12-05 11:03
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>
```
0 讨论(0)
发布评论:

提交评论
- 加载中...

走了就别回头了

2020-12-05 11:05

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%;
}

0 讨论(0)