是否可以使用CSS3转换文本对齐？

是否可以使用 css3转换文本对齐？例如,我想从左到右动画文本对齐,但是,在text-align上添加一个transition属性不会做到这一点.

http://codepen.io/anon/full/lGDwB

解决方法

如果我明白你要做什么,一种方法是改变你的布局,动画左/右属性：

Working CodePen

这通过将span元素的右侧设置到屏幕的左侧来利用可见的溢出.悬停在背景上,右侧设置为0,将元素过渡到屏幕上.

注意：在这种情况下,当转换回左边时,您会丢失一些缓存,因为它一直转换到零,而不是文本的自然宽度.

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

原文地址：https://www.jb51.cc/css/216596.html