<div class="container">
  <span></span>
  <div class="cursor"></div>
</div>

html, body {
  position: relative;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
}
.container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  color: #333;
}
.container span {
  font-size: 30px;
  font-weight: bold;
}
.cursor {
  display: inline-block;
  width: 2px;
  height: 25px;
  background: #333;
}

/*
https://github.com/daybrush/scenejs
https://github.com/daybrush/scenejs-effects
*/
new Scene({
  ".container span": Scene.typing({
    text: "Make a typing effect with Scene.js.",
    duration: 7,
    delay: 1,
  }),
  ".cursor": {
    0: { opacity: 0 },
    0.5: { opacity: 0 },
    "0.5>": { opacity: 1 },
    1: { opacity: 1 },
    options: {
      iterationCount: 8,
    }
  },
}, {
  iterationCount: "infinite",
  direction: "alternate",
  selector: true,
}).play();