Is it possible to transition text-alignment using

2020-01-31 00:54发布

站内问答 / HTML/CSS
743 5 5

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

5条回答
虎瘦雄心在
2楼-- · 2020-01-31 01:19

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) 举报
The star\"
3楼-- · 2020-01-31 01:21

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) 举报
▲ chillily
4楼-- · 2020-01-31 01:24

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) 举报
Bombasti
5楼-- · 2020-01-31 01:26

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) 举报
冷血范
6楼-- · 2020-01-31 01:36

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) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(5)