Transition Animation To Text Align: Center

I'm using the below; but the margin isn't nearly as approximate as text-align:center; is there anyway I could toggle text-align: center; to occur with a animation transition until

Solution 1:

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

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

Solution 2:

From what i understood if you want to use the text-align:center property something like this could be of help to you, but the text-align property can't be animated

$(function(){


  $('.resources_header h2').click(function(){
  
        $(this).toggleClass('align-center');
  
  });


});

.align-center{
 text-align: center;
}

<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><divclass="container"><divclass="resources_header"><h2>HEADER</h2></div></div>

A problem with this is the animation so if what you want to achieve is to animate from left to center then why not:

$(function(){

  $('.resources_header h2').click(function(){
    
    
    var windowHalfWidth = $(window).width()/2;
    $(this).css('position','absolute');
    
    var elemHalfWidth = $(this).width()/2;           
    var left = windowHalfWidth - elemHalfWidth;
      $(this).animate({
         marginLeft: left
      },"slow",function(){
              $(this).css('position','static');
      });
  
  });


});

<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><divclass="container"><divclass="resources_header"><h2>HEADER</h2></div></div>

Solution 3:

You could animate center align using margin-left like this

var h1 = $('h1').width();
var parent = $('.container').width();
$('h1').animate({'margin-left':(parent/2-h1/2)}, 1500);

.container {
  border: 1px solid black;
  height: 100px;
}

h1 {
  display: inline-block;
}

<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><divclass="container"><h1>Text</h1></div>