How I can realize an animation of text typing from right to left and from bottom to top?

Question

I want to make a text animation like typing from right to left and from bottom to top.

How can I realize animated text typing from right to left and from bottom to top.

On the top I want typing from right to left and on right from bottom to top... so it looks like typing around the screen...

here my code:

blau();

function blau(){

var elmnt = document.getElementById("myDIV");
    
	var divheight = elmnt.offsetHeight;
	var divwidth = elmnt.offsetWidth;
	var dh = Math.floor((divheight / 15));
	var dw = Math.floor((divwidth / 16));
	var links = dh;
	var unten = dh + dw;
	var rechts = unten + dh;
	var oben = rechts + dw;
	var ges = ((dh * 2) + (dw * 2));
	var i ;
	var a ;
	var b ;
	var c ;
	var d ;
	var txta = '';
	var txtb = '';
	var txtc = '';
  var txtd = '';

  
	for (a = 0; a < dh; a++) {
	
  txta += "#";

	  document.getElementById("left").innerHTML = txta;
	  document.getElementById("left").style.visibility = "hidden";
  }
  for (b = 0; b < dw; b++) {
  txtb += "  #";
    document.getElementById("bottom").innerHTML = txtb;
    document.getElementById("bottom").style.visibility = "hidden";
  }
  for (c = 0; c < dh; c++) {
  txtc += "#";
	  document.getElementById("right").innerHTML = txtc;
	  document.getElementById("right").style.visibility = "hidden";
	}
	for (d = 0; d < dw; d++) {
	txtd += "#  ";
	  document.getElementById("top").innerHTML = txtd;
	  document.getElementById("top").style.visibility = "hidden";
	}

animateLeft(dh,dw);
}

function animateLeft(dh,dw){

var character_count = $('.animated-text-left').text().length;
$('.animated-text-left').css('animation', 'left 1s steps(' + dh + ') forwards').css('font-family', 'monospace');
$('<style>@keyframes left {from {height: 0; } to {height: ' + dh + 'ch; } }</style>').appendTo('left');

document.getElementById("left").style.visibility = "visible";


setTimeout(
      function() {
      animateBottom(dh,dw);  
      },
      1000);
}
function animateBottom(dh,dw){
var character_count = $('.animated-text-bottom').text().length;
$('.animated-text-bottom').css('animation', 'bottom 1s steps(' + (dw * 3) + ') forwards').css('font-family', 'monospace');
$('<style>@keyframes bottom {from {width: 0; } to {width: ' + (dw * 3) + 'ch; } }</style>').appendTo('bottom');
document.getElementById("bottom").style.visibility = "visible";


setTimeout(
      function() {
      animateRight(dh,dw);
      },
      1000);
}
function animateRight(dh,dw){
var character_count = $('.animated-text-right').text().length;
$('.animated-text-right').css('animation', 'right 1s steps(' + dh + ') forwards').css('font-family', 'monospace').css('float', 'right');
$('<style>@keyframes right {from {height: 0; } to {height: ' + dh + 'ch; } }</style>').appendTo('right');
document.getElementById("right").style.visibility = "visible";


setTimeout(
      function() {
     animateTop(dh,dw);
      },
      1000);
}
function animateTop(dh,dw){
var character_count = $('.animated-text-top').text().length;
$('.animated-text-top').css('animation', 'top 1s steps(' + (dw * 3) +  ')').css('font-family', 'monospace').css('float', 'right');
$('<style>@keyframes top {from {width: 0; } to {width: ' + (dw * 3) + 'ch; } }</style>').appendTo('top');
document.getElementById("top").style.visibility = "visible";
}

  html, body {
  height:100%;
	
  margin:0;
  padding: 0;
  
}
body {

  	padding: 0;
  	margin:0;
}


.animated-text-left {
	font-family: monospace;
	overflow: hidden;

  word-wrap: break-word;
	white-space: nowrap;
  
  
  }
  
.animated-text-bottom {
  font-family: monospace;
  overflow: hidden;
  
  word-wrap: break-word;
  white-space: nowrap;
  
  
  }

.animated-text-right {
	font-family: monospace;
	overflow: hidden;
	
	word-wrap: break-word;
	white-space: nowrap;
	
	
	}

.animated-text-top {
	font-family: monospace;
	overflow: hidden;

	word-wrap: break-word;
	white-space: nowrap;
	
	
	}	
	
	





#myDIV {
    height: 100%;
    width: 100%;
    overflow:hidden;
    
    
    background-color: black;
}

#left {
	color: white;
    height: 100%;
    width: 10px;
    left:0px;
    position: absolute;
    float:left;
    background-color: black;
	white-space: pre-wrap;      /* CSS3 */   
   white-space: -moz-pre-wrap; /* Firefox */    
   white-space: -pre-wrap;     /* Opera -7 */   
   white-space: -o-pre-wrap;   /* Opera 7+ */    
   word-wrap: break-word;      /* IE */
}

#middle{
width: 100%;
height: 100%;
    margin-left: 10px;
margin-right: 10px;

margin-bottom: 10px;
    float: left;
    position: relative;
}

#content{
width: 100%;
height: 100%;
  
margin-top: 10px;
margin-bottom: 10px;
    
    position: absolute;
}

#top {
    height: 10px;
    width: 100%;
    text-align:right;
    color: white;
    position: absolute;
    top: 10;
    background-color: black;
}

#contenta {
    height: 90%;
    width: 100%;
   
    
    color:white;
    position: relative;
    background-color: black;
  
  		   
}



#contentb {
    height: 10%;
    width: 100%;
    
    
   position: relative;
    color: white;
    background-color: black;
	
}

#bottom {
    height: 10px;
    width: 100%;
    color: white;
    position: absolute;
    bottom: 0;
    background-color: black;
}

#right {
	color: white;
    height: 100%;
    width: 10px;
    right:0px;
    float:right;
    position: absolute;
    background-color: black;
  white-space: pre-wrap;      /* CSS3 */   
   white-space: -moz-pre-wrap; /* Firefox */    
   white-space: -pre-wrap;     /* Opera -7 */   
   white-space: -o-pre-wrap;   /* Opera 7+ */    
   word-wrap: break-word;      /* IE */
}

#right span{
   width: 10px;
    right:0px;
    bottom: 0;
    position: absolute;

  
}

@keyframes typing {
	from { 
		width: 0;
	}

	
}

@keyframes left {
  from { 
  	height: 0;
  }

  
}

@keyframes bottom {
	from { 
		width: 0;
	}

	
}

@keyframes right {
  from { 
  	height: 0;
  }


}

@keyframes top {
	from { 
		width: 0;
	}

	
}



.string-highlight{
    color: rgba(253, 149, 90, 0.8);
}
.string-red{
    color: red;
}
.string-at{
    color: rgba(253, 149, 90, 0.8);
}
.string-texta{
    color: white;
}
.string-textb{
    color: red;
}
.string-textc{
    color: green;
}
.string-textd{
    color: blue;
}
.string-dot{
    color: blue;
}
.string-ok{
    color: green;
}
.string-done{
    color: green;
}
.string-connected{
    color: green;
}
.string-klammer{
    color: blue;
}
.string-sysinfo{
    color: green;
}

<!doctype html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<meta charset="UTF-8">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name=description content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Getippter Text mit CSS-Animationen</title>
</head>

<body>

<!-- <script src="js.js" ></script> -->
    
<div id="myDIV">

<div id="left" class="animated-text-left" ></div>
<div id="middle">
<div id="top" class="animated-text-top"></div>
<div id="content">
<div id="contenta" class="animated-texta">
	
	<span >

<span  style="text-align:right;"> weiterer text</span>
	
	
	</span>
	
	
</div>
<div id="contentb" class="animated-texta">



console



</div>
</div>
<div id="bottom" class="animated-text-bottom"></div>
</div>
<div id="right" class="animated-text-right"><span></span></div>




</div>

</body>
</html>

Answer 1

Just add this css to your #top

right: 0px; direction: ltr;

And this to your #right

bottom: 0px; direction: ltr;

Live example: https://jsfiddle.net/6xqpo0rv/