Можно ли перевести выравнивание текста с помощью css3? Например, я хотел бы оживить выравнивание текста слева направо, однако добавление свойства перехода в text-align не делает трюк.
Возможно ли преобразовать выравнивание текста только с помощью CSS3?
Ответ 1
Если я понимаю, что вы собираетесь делать, один из способов сделать это - немного изменить макет и оживить свойства left/right:
Это означает, что переполнение становится видимым, установив right
элемента span
в левую сторону экрана. При наведении фона right
устанавливается в 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;
}
Ответ 2
Я узнал способ не только анимации слева направо/справа налево, но и из централизованного текста.
Трюк заключается в применении ширины "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>
Ответ 3
Вы можете выровнять текст вправо и увеличить ширину контейнера.
Вот пример: 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%;
}
Ответ 4
Как я это делаю, просто используйте текстовый отступ вместо text-align. Вы должны сделать пробную/ошибку немного, чтобы выяснить количество px, rem, em,% или любого другого места, где вы хотите переместить элемент с помощью текстового отступа.
.tsetup
{
text-indent:0;
transition: text-indent 150ms linear;
}
.tright
{
text-indent:50px; /* adjust me by trial and error */
}
Итак, я могу добавить класс tsetup
в свой элемент. Когда я нажимаю на него, я добавляю класс tright
. Когда я снова нажимаю на него, я удаляю класс tright
. Он делает постепенное постепенное исчезновение слева направо.
Я использую эту технику с помощью значка FontAwesome fa-circle
(content:"\f111";font-family:FontAwesome;)
, чтобы установить флажок для переключения слайдера.
Ответ 5
Это старый вопрос, но у меня недавно была такая же проблема, и я нашел ответы здесь неудовлетворительными для моего случая использования.
Самая большая проблема, с которой я сталкиваюсь в решении от dc5, заключается в том, что она использует свойства медленной позиции для анимации, что плохо для переходов, поскольку они требуют повторной компоновки и не аппаратно ускоряются.
Мое решение основано исключительно на transform: transitionX()
и использует тот факт, что translate()
всегда зависит от ширины/высоты целевого элемента:
Это мое решение:
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>