How to Transition Text-Alignment Using CSS3 Only

Is it possible to transition text-alignment using CSS3 only?

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>

transition animation to text align: center

You can use a centering technique that allows you to horizontally center any element.

It can be animated using only CSS

.test {  position: absolute;  transform: translateX(0%);  left: 0%;  animation: center 2s infinite;}
@keyframes center {  0%, 10% {      transform: translateX(0%);      left: 0%;   }  90%, 100% {      transform: translateX(-50%);      left: 50%;   }}

<h1 class="test">TEST</h1>

CSS3 - animate text align left/center/right

I needed something similar today. I wanted a button that started with text aligned to the right, but then animated the text to center on hover/focus.

Here is what I came up with. The problem I have with several of the answers I have found is that they animate "position", which is not very performant. I wanted to use only "transform". This is a lot of markup just for centering button text, but seems to work well.

body {margin: 0}ul, li {  margin: 0;  padding: 0;}li {  width: 30%;  padding: 10px 0;}button {  width: 100%;  height: 50px;  margin: 0;}.center-line {  position: absolute;  width: 2px;  height: 100%;  background: lightgray;  left: 15%;  top: 0;}
.outer {  text-align: right;  transition: 200ms transform;}.inner {  display: inline-block;  transition: 200ms transform;}
button:hover .outer {  transform: translateX(-50%);}button:hover .inner {  transform: translateX(50%);}

<ul>  <li>    <button>      <div class="outer">        <div class="inner">Text 1</div>      </div>    </button>   </li>  <li>    <button>      <div class="outer">        <div class="inner">Text Two</div>      </div>    </button>   </li>  <li>    <button>      <div class="outer">        <div class="inner">Text Longer Three</div>      </div>    </button>   </li></ul><span class="center-line" />

CSS text-align delay with width animation

You're animating the width of the div. So the content will be revealed as the width increases. Alternatively, you could animate pseudo-selectors and reveal the text.

Hope this is the result you're expecting.

JS Fiddle

Text not aligning in CSS animation

Use css property word-wrap: break-word; and reduce the line-height:200px; to value like 15px;

.hover-img {
position: relative;
width: 200px;
height: 200px;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
background:url(http://www.wholesaleforeveryone.com/content/images/blank/600/solid_color.gif);
-webkit-transform:rotateY(180deg);
-webkit-transform-style: preserve-3d;
line-height:15px;
text-align:center;
font-size:0;
word-wrap:break-word;

}

demo http://codepen.io/krish4u/pen/sijrC

Text-align transiton when resizing window

the linked answer was what you needed, but with addition: direction: rtl; so text overflow to the left and wrapping elements with span to avoid messing with hover effects.

let responsiveNav = document.getElementById("responsiveNav");
    let responsiveNavDarkBackground = document.getElementById("responsiveNavDarkBackground");

    function openResponsiveNav() {
        responsiveNav.style.right = "0";
        responsiveNavDarkBackground.style.background = "rgba(0,0,0,0.5)";
        responsiveNavDarkBackground.style.zIndex = "9998";
    }

    function closeResponsiveNav() {
        responsiveNav.style.right = "-100%";
        responsiveNavDarkBackground.style.background = "rgba(0,0,0,0)";
        responsiveNavDarkBackground.style.zIndex = "-1";
    }

    window.onclick = function(event) {
        if (event.target === responsiveNavDarkBackground) {
            closeResponsiveNav();
        }
    }

* {
            margin: 0;
            padding: 0;
            font-family: 'Roboto', sans-serif;
        }

        .bi-list {
            font-size: 50px;
            float: right;
            cursor: pointer;
        }

        /* Navigation */

        #responsiveNavDarkBackground {
            height: 100%;
            width: 100%;
            position: absolute;
            top: 0;
            background: rgba(0,0,0,0);
            z-index: -1;
            transition: all 0.5s;
        }

        #responsiveNav {
            position: fixed;
            right: -100%;
            top: 0;
            z-index: 9999;
            height: 100%;
            width: 100%;
            background: #F5C152;
            transition: all 0.5s;
        }

        #responsiveNavHeader {
            background: #fff;
            padding: 1em;
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-direction: row;
        }

        #responsiveNav #responsiveNavHeader img {
            height: 35px;
        }

        #responsiveNavHeader #closeResponsiveNav {
            font-size: 25px;
            cursor: pointer;
        }

        #responsiveNav ul {
            list-style: none;
            text-align: right;
        }

        #responsiveNav ul li {
            font-size: 1.2em;
            padding: 1em;
            transition: all 0.1s;
            color: #fff;
        }

        #responsiveNav ul li:hover {
            background: #c69943;
            cursor: pointer;
        }

        #responsiveNav ul li:active {
            background: #a78139;
            cursor: pointer;
        }
        .responsiveNavItem > span{
          display: inline-block;
          text-align: center;
          white-space: nowrap;
          width: 100%;
          overflow: visible;
          direction: rtl;
          transition: all 1.5s ease;
        }

        @media screen and (min-width: 600px){
        .responsiveNavItem > span{
          width: 0;
        }
            #responsiveNavDarkBackground {
                height: 100%;
                width: 100%;
                position: absolute;
                top: 0;
                background: rgba(0,0,0,0);
                z-index: -1;
                transition: all 0.5s;
            }

            #responsiveNav {
                position: fixed;
                right: -600px;
                top: 0;
                z-index: 9999;
                height: 100%;
                width: 400px;
                background: #F5C152;
                box-shadow: 0 0 15px 10px #5d5d5d;
                transition: all 0.5s;
            }

            #responsiveNavHeader {
                background: #fff;
                padding: 1em;
                display: flex;
                justify-content: space-between;
                align-items: center;
                flex-direction: row;
            }

            #responsiveNav #responsiveNavHeader img {
                height: 35px;
            }

            #responsiveNavHeader #closeResponsiveNav {
                font-size: 25px;
                cursor: pointer;
            }

            #responsiveNav ul {
                list-style: none;
                /*text-align: right;*/
                transition: all 0.3s;
            }

            #responsiveNavul:hover > li {
                width: 0;
            }

            #responsiveNav ul li {
                font-size: 1.2em;
                padding: 1em;
                transition: all 0.1s;
                color: #fff;
            }

            #responsiveNav ul li:hover {
                background: #c69943;
                cursor: pointer;
            }

            #responsiveNav ul li:active {
                background: #a78139;
                cursor: pointer;
            }
        }

<link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css">
    <i class="bi bi-list" onclick="openResponsiveNav();"></i>

<div id="responsiveNavDarkBackground">
    <div id="responsiveNav">
        <div id="responsiveNavHeader">
            <h1>Menu</h1>
            <i class="bi bi-x-lg" id="closeResponsiveNav" onclick="closeResponsiveNav();"></i>
        </div>

        <ul>
            <li class="responsiveNavItem"><span>Home</span></li>
            <li class="responsiveNavItem"><span>Menu</span></li>
            <li class="responsiveNavItem"><span>Our Story</span></li>
            <li class="responsiveNavItem"><span>Contact Us</span></li>
        </ul>
    </div>
</div>

Animating Text Using CSS

The text-align property is not animatable, so CSS transitions will not be applied to it.

One possible workaround involves positioning your text inside a div absolutely and animating the left property instead. For example, modify your header HTML like this:

<div class="subjectHeader"><span class="subjectHeaderInner>Chemistry</span></div>

Then animate the CSS of .subjectHeaderInner using the left and margin properties. Don't change text-align as there's no way to animate that property. For example:

div.subject .subjectHeaderInner {
    width: 200px;
    position: absolute;
    left: 50%;
    margin-left: -100px;
    -moz-transition: all 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}
div.subject:hover .subjectHeaderInner {
    left: 0;
    margin-left: 0;
}

I updated your fiddle with this code: http://jsfiddle.net/kAPtL/5/

Other workarounds are possible depending on what kind of effect you want. There are some examples at Is it possible to transition text-alignment using CSS3 only?

Is there a way to animate the transition from text-align left to center in an input box

The only real way to achieve this is through some funky behind-the-scenes magic, using a temporary element that mimics the text inside the input.

Here's a working example: http://jsfiddle.net/xLg93/

$('#box').on('focus', function () {
    var full_width = $(this).width();
    var t = document.createElement('span');
    t.innerHTML = $(this).val();
    t.style.visibility = 'hidden';
    document.body.appendChild(t);
    var text_width = $(t).width();
    document.body.removeChild(t);
    $(this).animate({
        'text-indent': (full_width - text_width) / 2
    });
});

Keep in mind you'll have to style the temporary element's font-size, font-face and letter-spacing to be identical to the input box, otherwise it won't animate to the exact center.

Bidirectional CSS Transition

The assumption that all the properties being changed will be animated is incorrect.

Only animatable properties will be transitioned gracefully, and text-align is not animatable.

Here's a complete list of animatable properties from MDN.

Here's a simplified example that increases the animation time. It's easy to see that the animation to left align the text never occurred in the first place.

$(window).scroll(function () {  var belowTop = $(this).scrollTop() > 30;  $('header').toggleClass('sticky', belowTop);});

header {  position: fixed;  width: 100%;  transition: all 2s ease;
  font-size: 32px;  text-align: center;}header.sticky {  font-size: 16px;  text-align: left;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header><h1>Header</h1></header><img src="http://i.stack.imgur.com/8pezV.jpg" alt="Big Image" />

Slide up animation for text using CSS only

Use a <span> in a <span>. The parent span should have overflow hidden and the child span should have the animation

.offset-header {
  font-family: Outfit;
  font-style: normal;
  font-weight: 400;
  font-size: 42px;
  line-height: 44px;
  letter-spacing: -0.02em;
  max-width: 500px;
  margin: 10px 0;
  }

  span.offset-header {
    display: block;
    overflow: hidden;
  }
  span.offset-header > span {
    animation-name: slideUp;
    animation-duration: 4s;
    animation-timing-function: ease-in;
    display: block;
  }
  .offset-header-odd > span {
    text-align: left;
    animation-delay: 0s;
    animation-fill-mode: forwards;
  }
  .offset-header-even > span {
    text-align: right;
    animation-delay: 150ms;
    animation-fill-mode: both;
  }

  @keyframes slideUp {
    0%,
    50% {
      transform: translateY(100%);
      opacity: 0;
    }
     
    60%,
    100% {
      transform: translateY(0);
      opacity: 1;
    
    }
  }

<div class="offset-header">
  <h1 class="hero-header">
    <span class="offset-header offset-header-odd"><span>Elevate your space</span></span>
    <span class="offset-header offset-header-even"><span>with thoughtful design</span></span>
  </h1>
</div>