我怎样才能使动画居中以便它从中间开始？

Question

我想要的例子（正文eg.订阅）：https://sounddrout.com/

我的代码基本上有一个重复的打字机效果，它只是从右到左。虽然我希望它以居中的方式这样做（查看链接的网站作为示例）。我希望它从中间出来，这样两边都相等并向外扩展。像 google 文档中的中心内容一样思考。

body {
  margin: 0px;
}

.container {
  display: grid;
  grid-template-columns: 1fr;
}

/*Text*/

.font {
  font-family: 'Source Sans Pro', monospace;
}

.mid {
  text-align: center;
}

.txtsize {
  font-size: 40px;
}

h1 {
  width: max-content;
  position: relative;
  font-size: 40px;
  display: grid;
}

.textbody {
  margin: 120px;
  font-family: "Source Sans Pro", sans-serif;
  display: grid;
  place-content: center;
  text-align: center;
  background: var(--bg-color);
  font: 200;
}


/*typwriter*/

:root {
  --bg-color: hsl;
  --typewriterSpeed: 5s;
  --blinkLength: 650ms;
  --typewriterCharacters: 20;
}


/* Type Writer Effect */

h1::before,
h1::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

h1::before {
  background: white;
  animation: typewriter var(--typewriterSpeed) steps(20) infinite;
}

h1::after {
  width: 0.1em;
  background: black;
  animation: typewriter var(--typewriterSpeed) steps(20) infinite;
}

@keyframes typewriter {
  from {
    left: 0%;
  }
  45% {
    left: 100%;
  }
  65% {
    left: 100%;
  }
  85% {
    left: 0%;
  }
  to {
    left: 0%;
  }
}

@keyframes blink {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

<body>
  <div class="textbody">
    <h1>
      Subscribe To FuryRex09
    </h1>
  </div>

</body>

有什么想法吗？

抱歉，如果我不是很清楚，我在解释我的问题时遇到了很多麻烦。

P.S 这是一个代码笔 - https://codepen.io/furyrex09/pen/bGaybOe (;

Answer 1

如果你可以使用 JavaScript。这样我们就容易多了。

    $("#typed").typed({
        strings: ["This is first.", "This is second.", "Add any text you like here."],
        typeSpeed: 100,
        startDelay: 0,
        backSpeed: 60,
        backDelay: 2000,
        loop: true,
        cursorChar: "|",
        contentType: 'html'
    });

@import url('https://fonts.googleapis.com/css?family=Work+Sans');

html, body {
  height: 100vh;
  font-family: 'Work Sans', sans-serif;
  font-weight: bold;
  color: #fff;
  letter-spacing: 5px;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  background-size: cover;
  background: linear-gradient(to right, #0cebeb, #20e3b2, #29ffc6);
  margin: 0;
}

.type-wrap {
  font-size: 50px;
  padding: 20px;
}

/* the above is for styling puposes only */

.typed-cursor{
    opacity: 1;
    -webkit-animation: blink 0.7s infinite;
    -moz-animation: blink 0.7s infinite;
    animation: blink 0.7s infinite;
}

@keyframes blink{
    0% { opacity:1; }
    50% { opacity:0; }
    100% { opacity:1; }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/typed.js/1.1.1/typed.min.js"></script>
<div class="type-wrap">
  <span id="typed" style="white-space:pre;" class="typed">
  </span>
</div>

Answer 2

这是我的解决方案：

// TYPEWRITER //

const typedTextSpan = document.querySelector(".typed-text");
const cursorSpan = document.querySelector(".cursor");

const textArray = ["YouTuber", "Writer", "Designer", "Creator", "Programmer", "Gamer"]
const typingDelay = 200;
const erasingDelay = 100;
const newTextDelay = 2000;
let textArrayIndex = 0;
let charIndex = 0;

function type() {
  if(charIndex < textArray[textArrayIndex].length) {
    if(!cursorSpan.classList.contains("typing")) cursorSpan.classList.add("typing");
    typedTextSpan.textContent += textArray[textArrayIndex].charAt(charIndex);
    charIndex++;
    setTimeout(type, typingDelay);
  }
  else {
    cursorSpan.classList.remove("typing");
    setTimeout(erase, newTextDelay);
  }
}

function erase() {
  if(charIndex > 0) {
    if(!cursorSpan.classList.contains("typing")) cursorSpan.classList.add("typing");
    typedTextSpan.textContent = textArray[textArrayIndex].substring(0,charIndex-1);
    charIndex--;
    setTimeout(erase, erasingDelay)
  }
  else {
    cursorSpan.classList.remove("typing");
    textArrayIndex++;
    if(textArrayIndex>=textArray.length) textArrayIndex=0;
    setTimeout(type, typingDelay + 800);
  }
}

document.addEventListener("DOMContentLoaded", function() {
  if(textArray.length) setTimeout(type, newTextDelay + 250);
});

/* Text */
h1 {
    position: relative;
    font-size: 40px;
}

.textbody {
    margin-top: 100px;
    font-family: "Source Sans Pro", sans-serif;
    font-weight: bold;
    background: var(--bg-color);
    font: 200;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
}

.typed-text {
    font-weight: normal;
    color: #dd7732;
}

/* Root */

:root {
    --bg-color: hsl;
    --typewriterSpeed: 5s;
    --blinkLength: 825ms;
    --typewriterCharacters: 20;
}

/* Type Writer Effect */

.cursor {
    display: inline-block; 
    width: 3px;
    background-color: #ccc;
    margin-left: 0.1rem;
    animation: blink 1s infinite;
}
.cursor.typing {
    animation: none;
}

@keyframes blink {
    0% {background-color: #ccc;}
    49% {background-color: #ccc; }
    50% {background-color: transparent; }
    99% {background-color: transparent; }
    100% {background-color: #ccc; } 
}

<body>
<div class="textbody">
            <h1>
                I am a <span class="typed-text"></span><span class="cursor typing">&nbsp;</span>
            </h1>
    </div>
    <script src="main.js"></script>

</body>

我怎样才能使动画居中以便它从中间开始？

How can I center an animation so it goes from the middle?

html

css

css-animations