是否可以仅使用CSS3转换文本对齐？ [英] Is it possible to transition text-alignment using CSS3 only?

问题描述

是否可以使用css3转换文本对齐？例如，我想从左到右对文本对齐进行动画处理，但是，在text-align上添加一个transition属性并不能做到这一点。

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.

< a href =http://codepen.io/anon/full/lGDwB> http://codepen.io/anon/full/lGDwB

推荐答案

如果我明白你要做什么，一个方法是更改​​你的布局有点和动画左/右属性：

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:

工作代码本

通过将 span 元素的 right 设置到屏幕的左侧，可以利用溢出。在悬停背景时， right 设置为0，在屏幕上转换元素。

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 of the background, 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.

HTML

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

CSS

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

这篇关于是否可以仅使用CSS3转换文本对齐？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！