CSS微动画 - Loading又来了！文字版再出击～

Q: 倒数 8 篇了！逐渐进入养老阶段，会一直Loading吗？
A: Loading只是代表，主要是可以看看有哪些变化～～

几天前有出个文字版本的Loading，本篇要接着继续来做更多变化～～
CSS微动画 - Loading来了！终於要出款文字版本的了！

/* 以下每个范例都将使用相同的基础html及css，如下：*/
<style>
  .container {
    display: inline-flex;
    letter-spacing: 10px;
  }
  .text {
    font-size: 60px;
    font-weight: bold;
  }
  .text:nth-child(2) {
    animation-delay: .1s;
  }
  .text:nth-child(3) {
    animation-delay: .2s;
  }
  .text:nth-child(4) {
    animation-delay: .3s;
  }
  .text:nth-child(5) {
    animation-delay: .4s;
  }
  .text:nth-child(6) {
    animation-delay: .5s;
  }
  .text:nth-child(7) {
    animation-delay: .6s;
  }
</style>

<div class="container">
  <div class="text">L</div>
  <div class="text">O</div>
  <div class="text">A</div>
  <div class="text">D</div>
  <div class="text">I</div>
  <div class="text">N</div>
  <div class="text">G</div>
</div>

波浪Loading～

想要做到文字有波浪效果，调整height是做不到的，因为文字不会因为容器的宽高而调整大小，这时候可以使用transform的scaleY，Y轴调整元素垂直方向的缩放，如果只调整Y轴的缩放，X轴是不会变的，这时候就可以达到想要的效果。另外transform-origin设定bottom让元素在缩放的过程是以底部为轴心缩放，没有的话效果就会看起来完全不一样！

<style>
  .text {
    animation: scaleY .8s infinite;
    transform-origin: bottom;
  }
  @keyframes scaleY {
    50% {
      transform: scaleY(.5);
    }
  }
</style>

淡出渐入Loading～

这个范例比较特别有在父层设置overflow: hidden，并对文字设置animation-fill-mode: backwards，backwards的设定会让文字在animation-delay期间，让样式维持在animation的第一个的画面。

<style>
  .container {
    overflow: hidden;
  }
  .text {
    animation: animateToRight 3s infinite;
    animation-fill-mode: backwards;
  }
  @keyframes animateToRight {
    0% {
      transform: translateX(300px);
    }
    20%, 60% {
      opacity: 1;
      transform: translateX(0);
    }
    90%, 100% {
      opacity: 0;
      transform: translateX(-300px) scale(.2);
    }
  }
</style>

翻滚Loading～

之前的按钮有使用::before做出底线，这次跟Loading效果结合也别有一番风味～

<style>
  .container {
    position: relative;
    overflow: hidden;
  }
  .container::before {
    content: '';
    position: absolute;
    left: 0;
    bottom: 5px;
    height: 5px;
    width: 30px;
    background-color: Black;
    box-shadow: 2px 2px 3px Black;
    animation: goBorder 2s infinite;
  }
  .text {
    animation: textRotate 2s infinite;
    text-shadow: 2px 2px 3px Black;
  }
  @keyframes goBorder {
    0% {
      left: -30px;
    }
    50%, 100% {
      left: 100%;
    }
  }
  @keyframes textRotate {
    50%, 100% {
      transform: rotateZ(360deg) rotateY(360deg);
    }
  }
</style>

下一篇一样会是Loading，但会藉由下一篇的例子讲解animation带来的效能影响，敬请期待！

如果有写错的地方，欢迎点评！ 会及时改进～
如果有更好的写法，欢迎指教！ 希望各位不吝赐教～
如果想看更多效果，欢迎敲碗！ 提供示意图小编写写看～
如果内容疑似侵权，拜托告知！ 内容皆为小编理解後原创～
如果对你有点帮助，拿去用吧！