CSS 使用宽度百分比时打字机动画出错

Question

所以我拿了这段代码：http://codepen.io/thiagoteles/pen/ogoxLw

并且我尝试在我的博客标题中实现它：http://samanx.github.io/

出于某种原因，我无法让它留在中心。

我尝试创建一个额外的 div 并为其分配以下代码：

.center {
    margin: auto;
    position: absolute;
    top: 0; left: 0; bottom: 0; right: 0;
}

但是没有解决办法：问题是：

body {
  background-color: black;
}
.main-header {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  height: auto;
  min-height: 240px;
  height: 60%;
  padding: 15% 0;
}
.inner {
  position: relative;
  width: 80%;
  max-width: 710px;
  margin: 0 auto;
}
.page-title {
  /* margin: 10px 0 10px 0; */
  font-size: 2rem;
  letter-spacing: -1px;
  /* margin: 0 auto; */
  white-space: nowrap;
  overflow: hidden;
  transform: translateY(-50%);
  font-weight: 500;
  text-align: center;
  font-family: "Open Sans", sans-serif;
  color: #fff;
}
.page-description {
  margin: 0;
  font-size: 2rem;
  line-height: 1.5em;
  font-weight: 400;
  font-family: "Merriweather", serif;
  letter-spacing: 0.01rem;
  color: rgba(255, 255, 255, 0.8);
}
/* Animation */

.anim-typewriter {
  animation: typewriter 4s steps(44) 1s 1 normal both blinkTextCursor 500ms steps(44) 0 infinite normal;
  -webkit-animation: typewriter 4s steps(44) 1s 1 normal both, blinkTextCursor 500ms steps(44) 0 infinite normal;
  -moz-animation: typewriter 4s steps(44) 1s 1 normal both blinkTextCursor 500ms steps(44) 0 infinite normal;
  -o-animation: typewriter 4s steps(44) 1s 1 normal both blinkTextCursor 500ms steps(44) 0 infinite normal;
}
@keyframes typewriter {
  from {
    width: 0;
  }
  to {
    width: 24em;
  }
}
@-webkit-keyframes typewriter {
  from {
    width: 0;
  }
  to {
    width: 24em;
  }
}
@-moz-keyframes typewriter {
  from {
    width: 0;
  }
  to {
    width: 24em;
  }
}
@-o-keyframes typewriter {
  from {
    width: 0;
  }
  to {
    width: 24em;
  }
}
@keyframes blinkTextCursor {
  from {
    border-right-color: rgba(255, 255, 255, .75);
  }
  to {
    border-right-color: transparent;
  }
}
@-webkit-keyframes blinkTextCursor {
  from {
    border-right-color: rgba(255, 255, 255, .75);
  }
  to {
    border-right-color: transparent;
  }
}
@-moz-keyframes blinkTextCursor {
  from {
    border-right-color: rgba(255, 255, 255, .75);
  }
  to {
    border-right-color: transparent;
  }
}
@-o-keyframes blinkTextCursor {
  from {
    border-right-color: rgba(255, 255, 255, .75);
  }
  to {
    border-right-color: transparent;
  }
}

<div class="main-header-content inner">
  <h1 class="page-title anim-typewriter">TaoJS - All things Javascript</h1>
  <h2 class="page-description">All things Javascript: resources, my problems, my solutions</h2>
</div>

我的问题是它向右移动了太多。如果我删除这些行：

  width: 80%;
  max-width: 710px;

然后它不适用于移动设备和较小的屏幕。

Answer 1

这里您需要的是根据您的实际文本更改步长和宽度来更改一些值。

首先给 h1 一些值：

.page-title {
  /*Add this styles to center and keep the fake cursor*/
  width:0;
  margin:auto;
  border-right:1px solid white;
}

然后把动画改成：

.anim-typewriter {
  -webkit-animation: typewriter 4s steps(29) 1s 1 normal both, blinkTextCursor 500ms steps(29) 0 infinite normal;
}
@-webkit-keyframes typewriter {
  from {
    width: 0;
  }
  to {
    width:13em;
  }
}

其中 29 步长和 13em 宽度是相对于您要显示的文本的值。

检查此代码段：

body {
  background-color: black;
}
.main-header {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  height: auto;
  min-height: 240px;
  height: 60%;
  padding: 15% 0;
}
.inner {
  position: relative;
  width: 80%;
  max-width: 710px;
  margin: 0 auto;
}
.page-title {
  font-size: 2rem;
  white-space: nowrap;
  overflow: hidden;
  font-weight: 500;
  text-align: center;
  font-family: "Open Sans", sans-serif;
  color: #fff;
  text-align:center;
  width:0;
  margin:auto;
  border-right:1px solid white;
}
.page-description {
  margin: 0;
  font-size: 2rem;
  line-height: 1.5em;
  font-weight: 400;
  font-family: "Merriweather", serif;
  letter-spacing: 0.01rem;
  color: rgba(255, 255, 255, 0.8);
}
/* Animation */

.anim-typewriter {
  -webkit-animation: typewriter 4s steps(29) 1s 1 normal both, blinkTextCursor 500ms steps(29) 0 infinite normal;
}
@-webkit-keyframes typewriter {
  from {
    width: 0;
  }
  to {
    width:13em;
  }
}
@-webkit-keyframes blinkTextCursor {
  from {
    border-right-color: rgba(255, 255, 255, .75);
  }
  to {
    border-right-color: transparent;
  }
}

<div class="main-header-content inner">
  <h1 class="page-title anim-typewriter">TaoJS - All things Javascript</h1>
  <h2 class="page-description">All things Javascript: resources, my problems, my solutions</h2>
</div>

CSS 使用宽度百分比时打字机动画出错

CSS Typerwriter animation gone wrong while working with width percentage

html

css

css-animations

检查此代码段：