html css scss text animation

用CSS Animation寫出text revealing動畫

王淳藝 Celia Wang 2022/10/28 12:00:00

0 1603

在一般的網頁上通常會有最吸睛的大標題，若剛好是設計視覺性強類型的網頁，那麼為標題加上文字揭露動畫一定會更有效果！

----

Step 1. html架構

<div class="container">
  <h1>
    <span></span>
    <span id="a">CSS</span>
    <span id="b">IS</span>
    <span id="c">AWESOME</span>
  </h1>
</div>

在html的部分，先將想要加上揭露效果的文字打上，並在文字前加上一個空白的<span> tag，做為揭露效果中擋住文字的長方形元素。

Step 2-1. 文字Css撰寫

在h1的部分先設定了文字的大方向樣式：行高、字體、排列方式為斷行等等：

h1 {
  margin: 0;
  font-size: 4rem;
  display: inline-flex;
  align-items: flex-start;
  flex-direction: column;
  line-height: 1.2;
  font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
}
span {
  display: flex;
}

接著進入 #a #b #c 三行文字的設定：

#a {
  color: #ea4335;
  background-color: white;  
}
#b {
  color: #fbbc05;
  background-color: #fff;
}
#c {
  color: #34a853;
}

Step 2-2. 遮蓋之長方形Css撰寫

前面提到，遮蓋文字的長方形我們使用了 <span> 做為它的架構，因此接下來就要來設定長方形的屬性：

.container {
  position: relative;
  display: block;
  padding: 1vmin;
  overflow: hidden;
}
span:first-child {
  display: flex;
  position: absolute;
  height: 4rem;
  width: 10px;
  background-color: white;
  z-index: -100;
  transform: translate(10rem, 0rem);
}

此處使用了頭尾選擇器來指定第一個<span> tag ，也就是長方形來撰寫樣式。

---> 在這邊可以看到，長方形進入畫面的方向從第一行開始依序是：右至左 > 左至右 >右至左

因此我們需要將長方形的起始位置往右移動，所以設定了 transform: translate(10rem, 0)。

在這邊要注意的是，長方形需要用定位的方式定在文字的上方，因此最外層的.container需要加上position: relative;的屬性。

Step 3-1. 文字預設隱藏的動畫撰寫

#a {
  color: #ea4335;
  background-color: white;
  animation-name: text-hide;
  animation-duration: 0.5s;
  animation-delay: 0s;
}
#b {
  color: #fbbc05;
  background-color: #fff;
  animation-name: text-hide;
  animation-duration: 1s;
}
#c {
  color: #34a853;
  animation-name: text-hide;
  animation-duration: 1.4s;
}

@keyframes text-hide {
  0% {
    color: var(--white);
  }
  95% {
    color: var(--white);
  }
}

在這個步驟我們把#a #b #c 三行文字都加上了名為 “text-hide” 的動畫，

此動畫讓文字在各自的動畫過程中 0% ~ 95% 文字都會是白色的狀態，而最後會返回原始設定的紅、黃、綠色，

這樣就營造出像是原本文字隱藏，而最後文字出現的效果。

另外將這三行文字分別加上animation: duration屬性，讓它們各自以0.5秒、1秒、1.5秒的時間進行以上動畫。

Step 3-2. 長方形行動路線的動畫撰寫

span:first-child {
  display: flex;
  position: absolute;
  height: 4rem;
  width: 10px;
  background-color: white;
  z-index: -100;
  transform: translate(10rem, 0rem);
  animation: rectangle-show 2s ease-out;
}

@keyframes rectangle-show {
  0% {
    background-color: #ea4335;
    transform: translate(10rem, 0rem);
    z-index: 2;
  }
  20% {
    background-color: #ea4335;
    transform: translate(0rem, 0rem);
  }
  25% {
    background-color: #ea4335;
    transform: translate(-9rem, 0rem);
  }
  30% {
    background-color: #fbbc05;
    transform: translate(-9rem, 5rem);
    width: 10rem;
  }
  40% {
    background-color: #fbbc05;
    transform: translate(0rem, 5rem);
    width: 20rem;
  }
  50% {
    background-color: #fbbc05;
    transform: translate(0rem, 5rem);
    width: 25rem;
  }
  60% {
    background-color: #34a853;
    transform: translate(0rem, 9.5rem);
    width: 27rem;
  }
  80% {
    transform: translate(-10rem, 9.5rem);
    background-color: #34a853;
  }
  89% {
    transform: translate(-20rem, 9.5rem);
    background-color: #34a853;
    z-index: 2;
  }
  91% {
    z-index: -100;
    background-color: var(--white);
  }
  100% {
    z-index: -100;
    background-color: var(--white);
  }
}

首先，我們先將長方形 - span:first-child 加上名為 “rectangle-show” 、時長2秒的動畫。

接著來分解落落長的關鍵影格每個階段代表什麼意思：