CSS中動畫入口的方便的小系統

網站不僅僅是靜態文檔，一些細節處理能讓網站更生動有趣。如果網頁內容不是直接顯示，而是以彈出、滑動、淡入或旋轉的方式出現呢？雖然這種動畫並非總是實用，但在某些情況下，它們可以吸引用戶注意特定元素，強化元素間的區分，甚至指示狀態變化，所以並非完全無用。

因此，我創建了一套CSS工具，用於在元素進入視野時為其添加動畫效果。是的，這完全是純CSS實現的。它不僅提供了多種動畫和變體，還支持動畫的交錯效果，幾乎可以像創建場景一樣。

例如，像這樣：

這實際上只是這個更高級版本的簡化版：

我們首先講解創建動畫的基礎，然後介紹我添加的一些細節，如何交錯動畫，以及如何在HTML元素中應用它們，最後還會看看如何在尊重用戶減少運動偏好的情況下實現所有這些。

基礎知識

核心思想是添加一個簡單的CSS @keyframes動畫，將其應用於我們想要在頁面加載時進行動畫處理的任何內容。讓我們讓一個元素淡入，在半秒鐘內從opacity: 0變為opacity: 1 ：

 .animate {
  animation-duration: 0.5s;
  animation-name: animate-fade;
  animation-delay: 0.5s;
  animation-fill-mode: backwards;
}

@keyframes animate-fade {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

請注意，這裡還有一個0.5秒的animation-delay ，讓網站其餘部分有時間先加載。 animation-fill-mode: backwards用於確保我們的初始動畫狀態在頁面加載時處於活動狀態。如果沒有這個，我們的動畫元素會在我們想要之前彈出。

如果我們偷懶，可以到此為止。但是，CSS-Tricks的讀者當然不會偷懶，所以讓我們看看如何使用一個系統來改進這種事情。

更炫酷的動畫

與只使用一兩種動畫相比，擁有各種動畫更有趣。我們甚至不需要創建一堆新的@keyframes來製作更多動畫。創建新的類非常簡單，我們只需要更改動畫使用的幀，而保持所有時間相同即可。

CSS動畫的數量幾乎無限。 (參見animate.style，這是一個巨大的集合。) CSS過濾器，如blur() 、 brightness()和saturate() ，當然還有CSS轉換也可以用來創建更多變體。

但現在，讓我們從一個新的動畫類開始，它使用CSS轉換使元素“彈出”到位。

 .animate.pop {
  animation-duration: 0.5s;
  animation-name: animate-pop;
  animation-timing-function: cubic-bezier(.26, .53, .74, 1.48);
}

@keyframes animate-pop {
  0% {
    opacity: 0;
    transform: scale(0.5, 0.5);
  }

  100% {
    opacity: 1;
    transform: scale(1, 1);
  }
}

我添加了一個小的cubic-bezier()時間曲線，來自Lea Verou 不可或缺的cubic-bezier.com，以獲得有彈性的反彈效果。

添加延遲

我們可以做得更好！例如，我們可以使元素以不同的時間進行動畫處理。這會創建一個交錯效果，從而在無需大量代碼的情況下創建看起來很複雜的運動。

這個在三個頁面元素上使用CSS過濾器、CSS轉換和大約十分之一秒的交錯動畫，感覺非常好：

我們所做的只是為每個元素創建一個新的類，該類間隔元素開始動畫的時間，使用相隔十分之一秒的animation-delay值。

 .delay-1 { animation-delay: 0.6s; }  
.delay-2 { animation-delay: 0.7s; }
.delay-3 { animation-delay: 0.8s; }

其他一切完全相同。請記住，我們的基本延遲是0.5s，因此這些輔助類從那裡開始計數。

尊重輔助功能偏好

讓我們成為優秀的網頁公民，並為啟用了減少運動偏好設置的用戶移除動畫：

 @media screen and (prefers-reduced-motion: reduce) {
  .animate { animation: none !important; }
}

這樣，動畫就不會加載，元素就會像正常一樣進入視野。 “減少”運動並不總是意味著“移除”運動，這一點值得提醒。

將動畫應用於HTML元素

到目前為止，我們已經查看了基本動畫以及一個稍微高級一點的動畫，我們可以通過交錯的動畫延遲（包含在新類中）使它變得更高級。我們還看到瞭如何同時尊重用戶的運動偏好。

儘管有實時演示展示了這些概念，但我們實際上並沒有介紹如何將我們的工作應用於HTML。很酷的是，我們幾乎可以在任何元素上使用它，無論是div、span、article、header、section、table、form……你懂的。

我們將要做的是：我們想在三個HTML元素上使用我們的動畫系統，每個元素獲得三個類。我們可以將所有動畫代碼硬編碼到元素本身，但是將其拆分可以讓我們獲得一個可以重用的動畫系統。

• .animate:這是包含我們的核心動畫聲明和時間的基類。
• 動畫類型:我們將使用之前的“彈出”動畫，但我們也可以使用淡入動畫。這個類在技術上是可選的，但它是應用不同運動的好方法。
• .delay- :如前所述，我們可以創建不同的類來交錯動畫在每個元素上開始的時間，從而產生一種整潔的效果。這個類也是可選的。

因此，我們的動畫元素現在可能看起來像這樣：

<h2> One!</h2>
<h2>Two!</h2>
<h2>Three!</h2>

讓我們數一數它們！

結論

看看：我們從一組看似基本的@keyframes開始，並將其變成了一個完整的系統，用於為進入視野的元素應用有趣的動畫。

這當然非常有趣。但對我來說，最大的收穫是，我們看到的例子形成了一個完整的系統，可以用來創建基線、不同類型的動畫、交錯延遲和尊重用戶運動偏好的方法。對我來說，這些都是靈活易用系統的全部要素。它用很少的東西給了我們很多，而沒有一堆額外的廢料。

我們所涵蓋的內容確實可以成為一個完整的動畫庫。但是，我當然沒有就此止步。我把我所有的CSS動畫文件都提供給你們了。裡面還有幾種動畫類型，包括15個不同延遲的類，可以用來交錯事物。我一直在自己的項目中使用這些，但這仍然是一個早期版本，我很樂意收到關於它的反饋。請享受，並在評論中告訴我你的想法！

 /* ==========================================================================
Animation System by Neale Van Fleet from Rogue Amoeba
========================================================================== */
.animate {
  animation-duration: 0.75s;
  animation-delay: 0.5s;
  animation-name: animate-fade;
  animation-timing-function: cubic-bezier(.26, .53, .74, 1.48);
  animation-fill-mode: backwards;
}

/* Fade In */
.animate.fade {
  animation-name: animate-fade;
  animation-timing-function: ease;
}

@keyframes animate-fade {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

/* Pop In */
.animate.pop { animation-name: animate-pop; }

@keyframes animate-pop {
  0% {
    opacity: 0;
    transform: scale(0.5, 0.5);
  }
  100% {
    opacity: 1;
    transform: scale(1, 1);
  }
}

/* Blur In */
.animate.blur {
  animation-name: animate-blur;
  animation-timing-function: ease;
}

@keyframes animate-blur {
  0% {
    opacity: 0;
    filter: blur(15px);
  }
  100% {
    opacity: 1;
    filter: blur(0px);
  }
}

/* Glow In */
.animate.glow {
  animation-name: animate-glow;
  animation-timing-function: ease;
}

@keyframes animate-glow {
  0% {
    opacity: 0;
    filter: brightness(3) saturate(3);
    transform: scale(0.8, 0.8);
  }
  100% {
    opacity: 1;
    filter: brightness(1) saturate(1);
    transform: scale(1, 1);
  }
}

/* Grow In */
.animate.grow { animation-name: animate-grow; }

@keyframes animate-grow {
  0% {
    opacity: 0;
    transform: scale(1, 0);
    visibility: hidden;
  }
  100% {
    opacity: 1;
    transform: scale(1, 1);
  }
}

/* Splat In */
.animate.splat { animation-name: animate-splat; }

@keyframes animate-splat {
  0% {
    opacity: 0;
    transform: scale(0, 0) rotate(20deg) translate(0, -30px);
    }
  70% {
    opacity: 1;
    transform: scale(1.1, 1.1) rotate(15deg);
  }
  85% {
    opacity: 1;
    transform: scale(1.1, 1.1) rotate(15deg) translate(0, -10px);
  }

  100% {
    opacity: 1;
    transform: scale(1, 1) rotate(0) translate(0, 0);
  }
}

/* Roll In */
.animate.roll { animation-name: animate-roll; }

@keyframes animate-roll {
  0% {
    opacity: 0;
    transform: scale(0, 0) rotate(360deg);
  }
  100% {
    opacity: 1;
    transform: scale(1, 1) rotate(0deg);
  }
}

/* Flip In */
.animate.flip {
  animation-name: animate-flip;
  transform-style: preserve-3d;
  perspective: 1000px;
}

@keyframes animate-flip {
  0% {
    opacity: 0;
    transform: rotateX(-120deg) scale(0.9, 0.9);
  }
  100% {
    opacity: 1;
    transform: rotateX(0deg) scale(1, 1);
  }
}

/* Spin In */
.animate.spin {
  animation-name: animate-spin;
  transform-style: preserve-3d;
  perspective: 1000px;
}

@keyframes animate-spin {
  0% {
    opacity: 0;
    transform: rotateY(-120deg) scale(0.9, .9);
  }
  100% {
    opacity: 1;
    transform: rotateY(0deg) scale(1, 1);
  }
}

/* Slide In */
.animate.slide { animation-name: animate-slide; }

@keyframes animate-slide {
  0% {
    opacity: 0;
    transform: translate(0, 20px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}

/* Drop In */
.animate.drop { 
  animation-name: animate-drop; 
  animation-timing-function: cubic-bezier(.77, .14, .91, 1.25);
}

@keyframes animate-drop {
0% {
  opacity: 0;
  transform: translate(0,-300px) scale(0.9, 1.1);
}
95% {
  opacity: 1;
  transform: translate(0, 0) scale(0.9, 1.1);
}
96% {
  opacity: 1;
  transform: translate(10px, 0) scale(1.2, 0.9);
}
97% {
  opacity: 1;
  transform: translate(-10px, 0) scale(1.2, 0.9);
}
98% {
  opacity: 1;
  transform: translate(5px, 0) scale(1.1, 0.9);
}
99% {
  opacity: 1;
  transform: translate(-5px, 0) scale(1.1, 0.9);
}
100% {
  opacity: 1;
  transform: translate(0, 0) scale(1, 1);
  }
}

/* Animation Delays */
.delay-1 {
  animation-delay: 0.6s;
}
.delay-2 {
  animation-delay: 0.7s;
}
.delay-3 {
  animation-delay: 0.8s;
}
.delay-4 {
  animation-delay: 0.9s;
}
.delay-5 {
  animation-delay: 1s;
}
.delay-6 {
  animation-delay: 1.1s;
}
.delay-7 {
  animation-delay: 1.2s;
}
.delay-8 {
  animation-delay: 1.3s;
}
.delay-9 {
  animation-delay: 1.4s;
}
.delay-10 {
  animation-delay: 1.5s;
}
.delay-11 {
  animation-delay: 1.6s;
}
.delay-12 {
  animation-delay: 1.7s;
}
.delay-13 {
  animation-delay: 1.8s;
}
.delay-14 {
  animation-delay: 1.9s;
}
.delay-15 {
  animation-delay: 2s;
}

@media screen and (prefers-reduced-motion: reduce) {
  .animate {
    animation: none !important;
  }
}

以上是CSS中動畫入口的方便的小系統的詳細內容。更多資訊請關注PHP中文網其他相關文章！