Est-il possible de faire la transition de texte-alignement à l'aide de CSS3 uniquement?

Est-il possible de faire la transition de texte-alignement à l'aide de css3? Par exemple, j'aimerais animer le texte-l'alignement de gauche à droite, cependant, l'ajout d'une transition propriété text-align ne pas faire l'affaire.

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

text-align n'est pas un animables propery: propriétés Animables. Si vous pouvez expliquer un peu plus (peut-être quelques photos?) de l'effet que vous allez pour, quelqu'un peut avoir une idée de la manière de l'accomplir.
Merci les gars. Les deux sont de bonnes solutions de contournement pour compenser le fait que les text-align n'est pas un animables de la propriété.

OriginalL'auteur Adam Soffer | 2013-08-14

  1. 14

    Si je comprends ce que vous allez pour, une façon de le faire est de modifier votre mise en page un peu et de les animer de gauche à droite/propriétés:

    Travail CodePen

    Cela prend avantage de dépassement de soit visible par le réglage de la right de la span élément vers la gauche de l'écran. Sur le vol stationnaire de l'arrière-plan, right est définie sur 0, la transition de l'élément sur l'écran.

    Remarque: dans ce cas, lors de la transition vers la gauche, vous faire perdre un peu de l'assouplissement de son passage tout le chemin à zéro plutôt que le naturel de la largeur du texte.

    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;
}
    Trouvé cela très utile, merci. En outre, l'ajout d'espaces:nowrap pour la durée de la gardera à une seule ligne (qui est ce que j'ai besoin de le faire)

    OriginalL'auteur dc5

  2. 4

    Vous pouvez aligner le texte à droite et à augmenter la largeur du conteneur.

    Voici un exemple: 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%;
}
    Bonne idée, mais il ne fonctionne pas pour moi (et votre codepen trop). Je semble qu'il ne peut pas faire la transition à partir de width:auto, il a besoin d'un px de la valeur. Pouvez-vous confirmer?

    OriginalL'auteur Martin Tale

  3. 1

    La façon dont je le fais, c'est d'utiliser simplement le texte-tiret à la place de text-align. Que vous avez à faire l'essai/erreur un peu pour trouver le bon nombre de px, rem, em, %, ou quel que soit l'endroit où vous souhaitez déplacer l'élément via text-indent.

    .tsetup
{
text-indent:0;
transition: text-indent 150ms linear;
}

.tright
{
text-indent:50px; /* adjust me by trial and error */
}

    Donc, je peux ajouter les tsetup classe de mon élément. Quand je clique dessus, j'ajoute le tright classe. Quand je clique dessus, encore une fois, j'ai supprimer le tright classe. Il fait un beau fondu progressif de gauche à droite.

    J'utilise cette technique avec la FontAwesome fa-circle icône (content:"\f111";font-family:FontAwesome;) de faire une case à bascule bouton de curseur.

    OriginalL'auteur Volomike