[譯] 如何用 CSS Animations 實現滑動圖片展示文字的效果

• 原文地址：Slide an Image to Reveal Text with CSS Animations
• 原文做者：Jesper Ekstrom
• 譯文出自：掘金翻譯計劃
• 本文永久連接：github.com/xitu/gold-m…
• 譯者：Fengziyin1234
• 校對者：portandbridge, Baddyo

在這篇文章中，我但願能帶領你們瞭解一下 CSS animation property，以及詳細地解釋個人我的網站中的一個效果：讓文字在移動的物體後出現。若是你想要看最後的成果，這裏有一個例子。

咱們將從下面這裏開始：

這裏請查看 Jesper Ekstrom 的 Revealing Text Animation Part 4 - Responsive 案例。

即便你對這個效果不是很是感興趣，這仍將是一個能夠擴展你 CSS 知識的好練習，你能夠從這個效果開始建立屬於你本身的動畫效果。就我而言，深刻地學習研究動畫，讓我對本身的 CSS 能力有了更多的自信，而且讓我更加有想象力，也讓我對於整個前端開發都更加感興趣了。

準備好了麼？讓咱們一塊兒開始吧。

步驟一：標記你的主元素

在咱們開始製做動畫效果以前，首先讓咱們建立一個包含了整個視口（viewport）的父元素。在這個元素中，咱們在兩的 div 中分別添加文字和圖片，以方便以後的自定義。HTML 將以下：

<!-- 父容器 -->
<div class="container"> 
  <!-- 包含圖片的 div -->
  <div class="image-container">
  <img src="https://jesperekstrom.com/wp-content/uploads/2018/11/Wordpress-folder-purple.png" alt="wordpress-folder-icon">
  </div>
  <!-- 包含將展現的文字的 div -->
  <div class="text-container">
    <h1>Animation</h1>
  </div>
</div>
複製代碼

咱們將使用一個靠譜的轉換小技巧，來在的父元素中，用 position: absolute; 使兩個 div 在父容器的水平和垂直方向上都居中。由於咱們但願咱們的圖片顯示在文字以前，這裏咱們給圖片一個更大的 z-index 值。

/* 父元素佔據整個頁面。 */
.container {
  width: 100%;
  height: 100vh;
  display: block;
  position: relative;
  overflow: hidden;
}

/* 內含圖片的 div */
/* 居中小技巧：https://css-tricks.com/centering-percentage-widthheight-elements/ */
.image-container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  z-index: 2; /* 確保圖片在上 */
}

/* 第一個 div 中的圖片 */
.image-container img {
  -webkit-filter: drop-shadow(-4px 5px 5px rgba(0,0,0,0.6));
  filter: drop-shadow(-4px 5px 5px rgba(0,0,0,0.6));
  height: 200px;
}

/* 包括將要被顯示出來的文字的 div */
/* 一樣的居中方法 */
.text-container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  z-index: 1; /* 將此 div 置於圖片容器之下 */
  margin-left: -100px;
}
複製代碼

咱們在整篇文章全部的例子中都沒有保留瀏覽器前綴，但若是你在生產環境中使用這些效果，請務必考慮加上前綴。

如今咱們的例子應該長這樣，基本上來講就是圖片元素在文字元素之上。

這裏請查看 Revealing Text Animation Part 1 - Mail Elements 案例。

步驟二：將文字藏在一個 div 後面

爲了使咱們的文字能從左到右顯示，咱們將在咱們的 .text-container 中添加另外一個 div。

<!-- ... -->

  <!-- 包括將要被顯示出來的文字的 div -->
  <div class="text-container">
    <h1>Animation</h1>
    <div class="fading-effect"></div>
  </div>
  
<!-- ... -->
複製代碼

而後加入下列 CSS 屬性並給其賦值：

.fading-effect {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  background: white;
}
複製代碼

正如你所見，這個 div 的背景是白的，能夠融入父元素中，而文字則藏在它後面。

若是咱們試一下改改這個 div 的長度，文字就會開始出現。你能夠在咱們下面的例子中來嘗試一下：

這裏請查看 Revealing Text Animation Part 2 - Hiding Block。

還有另一個不須要添加額外有背景的 div 就能夠達到一樣效果的方法。我會在文章後面中介紹它。🙂

步驟三：定義 animation keyframes

下面咱們將開始有趣的部分了！咱們將使用 animation property 和它的 @keyframes 功能來開始幫咱們的目標加入動畫效果。讓咱們先來建立兩個不一樣的 @keyframes，一個給咱們的圖片，一個給咱們的文字。代碼以下：

/* 把圖片從左側（-250px）滑到右側（150px）*/
@keyframes image-slide {
  0% { transform: translateX(-250px) scale(0); }
  60% { transform: translateX(-250px) scale(1); }
  90% { transform: translateX(150px) scale(1); }
  100% { transform: translateX(150px) scale(1); }  
}

/* 把目標縮小至消失（100% 到 0%）來滑動文字 */
@keyframes text-slide {
  0% { width: 100%; }
  60% { width: 100%; }
  75%{ width: 0; }
  100% { width: 0; }
}
複製代碼

我建議將全部的 @keyframes 添加到 CSS 文件的頂端，這樣的文件的結構會更好，固然這只是個人我的喜愛。

我只使用 @keyframes 很小一部分百分比值（主要是從 60% 到 100%）的緣由是我選擇在相同的時間段對兩個物體設置動畫，而不是爲它們添加一個 animation-delay。這只是個人我的喜愛。若是你選擇和我同樣的方法，必定記得要爲 0% 和 100% 設值；不然，動畫效果就會開始循環或者是形成一些很奇怪的結果。

爲了在咱們的 class 中啓用 @keyframes，咱們須要在 CSS 屬性 animation 上調用咱們的動畫名稱。例如，要將 image-slide 加入圖片元素上，咱們得這樣作：

.image-container img {
  /* [動畫名稱] [動畫時間] [動畫變形方法] */
  animation: image-slide 4s cubic-bezier(.5,.5,0,1);
}
複製代碼

@keyframes 的名稱的使用就像建立一個 class 同樣。換句話說，這裏的動畫名稱是什麼並不重要，只要確保你在想要使用該動畫的元素上使用同樣的名稱就能夠了。

若是這裏的 cubic-bezier 部分讓你感到頭大，那就快看看 Michelle Barker 的這個帖子。她深度的解釋了這個話題。若是隻是想要達到本文演示的目的，我以爲我這麼說就夠了：這是一個爲物體的整個移動過程建立一個自定義動畫曲線的方法。cubic-bezier.com 網站是一個很好的能夠幫助你生成這些值（而不是靠猜）的網站。

咱們以前說起了咱們但願避免循環動畫。咱們能夠經過使用 animation-fill-mode 子屬性來強行讓物體在動畫進度到達 100% 後就再也不移動。

.image-container img {
  animation: image-slide 4s cubic-bezier(.5,.5,0,1);
  animation-fill-mode: forwards;
}
複製代碼

目前爲止一切都很好！

這裏請查看 Revealing Text Animation Part 3 - @keyframes。

步驟四：實現響應效果（responsiveness）

由於動畫是基於固定的大小（像素），改變視口的寬度會形成元素們偏離，這不利於咱們根據元素的位置來隱藏和展示它們。咱們能夠在不一樣的 media queries 上建立多個動畫來解決這個問題（這也是我最初的作法），可是一次處理這麼多的動畫可不是什麼好玩的事。咱們可使用相同的動畫，經過在特色的斷點改變它的屬性來解決這個問題。

例如：

@keyframes image-slide {
  0% { transform: translatex(-250px) scale(0); }
  60% { transform: translatex(-250px) scale(1); }
  90% { transform: translatex(150px) scale(1); }
  100% { transform: translatex(150px) scale(1); }
}

/* 改變更畫的參數來適應大至 1000 像素的寬度 */
@media screen and (max-width: 1000px) {
  @keyframes image-slide {
    0% { transform: translatex(-150px) scale(0); }
    60% { transform: translatex(-150px) scale(1); }
    90% { transform: translatex(120px) scale(1); }
    100% { transform: translatex(120px) scale(1); }
  }
}
複製代碼

這樣就能夠啦。都是響應式噠！

這裏請查看 Revealing Text Animation Part 4 - Responsive。

替代方法：使用文字的動畫而非不透明的 div

我在以前保證過我會介紹一種不同的隱藏文字方法。咱們如今來介紹它。

與其使用一個全新的 div ─ <div class="fading-effect">，咱們可使用一個小技巧實用化 background-clip 將背景的顏色經過文字透出來：

.text-container {
  background: black;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
複製代碼

透明的文字容許背後背景的顏色滲透過來，能夠頗有效的隱藏文字。而且，由於是用背景隱藏文字，咱們能夠改變背景的寬度並觀察文字如何根據所給定的寬度被切割。這一樣使得給文字添加線性漸變顏色，甚至是背景圖片成爲可能。

我沒有在以前的演示中使用這個方法，由於它不能很好地兼容 IE（你看，代碼裏有 -webkit 這個瀏覽器前綴）。在咱們實際演示中使用的方法，果把文字換成圖片或者任何元素，仍然有效。

---

很是簡單的小動畫，是否是？它至關的細微，而且能夠你的 UI 元素添色。例如，它能夠用做揭示解釋類文字甚至圖片的標題。或者，能夠用一點 JavaScript 代碼來監聽點擊或滾動事件，從而觸發動畫，使網頁的交互方式更豐富。

對咱們的動畫有任何的問題嘛？有一些讓它們變得更好的建議嘛？快發在下面的評論中來告訴我吧！

若是發現譯文存在錯誤或其餘須要改進的地方，歡迎到 掘金翻譯計劃 對譯文進行修改並 PR，也可得到相應獎勵積分。文章開頭的 本文永久連接 即爲本文在 GitHub 上的 MarkDown 連接。

---

掘金翻譯計劃 是一個翻譯優質互聯網技術文章的社區，文章來源爲 掘金 上的英文分享文章。內容覆蓋 Android、iOS、前端、後端、區塊鏈、產品、設計、人工智能等領域，想要查看更多優質譯文請持續關注 掘金翻譯計劃、官方微博、知乎專欄。