Pure CSS Typewriter Animation Effect All In One

Pure CSS Typewriter Animation Effect All In One

/* pure CSS Animation Typewriter Effect */
.typewriter-effect {
  animation: auto-typing 4s steps(44) 1s 1 normal both running,
             blink-cursor 0.5s steps(44) infinite normal both running;
}

/* 字体盒子宽度动态变化 */
@keyframes auto-typing{
  from {
    width: 0;
  }
  to {
    width: 24em;
  }
}

/* cursor 透明度动态变化 */
@keyframes blink-cursor{
  from {
    border-right-color: rgba(255,255,255,.75);
  }
  to {
    border-right-color: transparent;
  }
}

live demo

refs

---

---

©xgqfrms 2012-2025

www.cnblogs.com/xgqfrms 发布文章使用：只允许注册用户才可以访问！

原创文章，版权所有©️xgqfrms, 禁止转载 🈲️，侵权必究⚠️！

---