css隱藏到顯示的過渡動畫_如何使用CSS3過渡和動畫突出顯示UI更改

設計師和藝術家在嘗試運動，效果和各種幻覺方面有著悠久的歷史，其目的是為他們的作品增添一層層次。 歐普運動在1960年代開始使用光學幻覺來給人一種運動印象。
從那時起，出現了越來越多的新方法，例如最近流行的動力學藝術 ，它通過使用多維運動來擴展觀看者的視野。 運動也出現在計算機科學中，1967年發明了第一個閃爍的光標。
在前端開發中，DOM元素通常在CSS3發布之前由JavaScript制作動畫 ，並且這種方法仍然有效，但是CSS3引入的新屬性使我們能夠 以更直觀的方式 增強設計 ， 使其具有不同的效果和動作。
CSS3提供的兩種主要技術是過渡和動畫。 在這篇文章中，我們將研究它們的含義，它們之間的區別以及如何使用它們。
轉場
狀態更改可視化的最簡單形式是將鼠標懸停在其上時更改按鈕或鏈接的顏色。 發生這種情況時，元素的樣式會略有不同，通常觀眾會注意到它好像在屏幕上移動了某些東西。
在懸停（或焦點或單擊）上更改鏈接CSS屬性是最古老，最簡單的過渡形式，它早在CSS3時代就已存在。

a {




	color: orange;
}
a:hover {
	color: red;
}
a:focus {
	color: blue;
}
a:visited {
	color: green;
}

當HTML元素從一種預定義狀態變為另一種預定義狀態時，將使用過渡。 CSS3引入了新的屬性，這些屬性允許比以前更複雜的可視化，例如計時功能或持續時間控制 。
在理解動畫之間的差異之後，我們將在下一部分中查看新CSS屬性。 現在，讓我們看一下您需要了解的有關轉換的最重要的事情。

他們總是有一個開始狀態和一個結束狀態。

起點和終點之間的狀態由瀏覽器隱式定義，我們無法使用CSS進行更改。

它們需要顯式觸發 ，例如通過CSS添加新的偽類，或通過jQuery添加新的類。

您可以在下面看到一個巧妙利用CSS3過渡的美麗示例，在該示例中，作者以一種非侵入性的方式顯示隱藏的信息，但仍可以引導用戶將注意力集中在新內容上。
動畫制作
如果我們想以更複雜的動作來可視化狀態變化，或者沒有明確的觸發器（例如，如果我們想在頁面加載時開始效果），則可以使用動畫 。
通過設置和配置自己的keyframes動畫使定義更複雜的路徑成為可能。 Keyframes是動畫過程中的中間點，它使我們可以根據需要多次更改動畫元素的樣式。
盡管CSS3提供了構建複雜動畫的好方法，但是創建它們通常比過渡更難，這就是為什麼那裏有許多出色的動畫庫可以幫助我們進行工作的原因。
您需要了解的有關CSS3動畫的最重要的事情包括：

它們不需要顯式觸發，它們可以在頁面加載或瀏覽器中發生另一個DOM事件時啟動

它們可以在使用過渡的情況下使用，例如在添加或刪除新類或偽類的情況下（盡管使用頻率較低）

他們要求我們定義一些關鍵幀（中間狀態）

我們可以指定這些關鍵幀的數量，頻率和樣式

在下面的示例中，您可以看到一個很酷的動畫下拉菜單。 當我們單擊按鈕時動畫開始。 這是通過在click事件發生時使用jQuery向列表元素添加額外的類來實現的。
這些新類在CSS文件中使用指定的@keyframes規則進行動畫處理。 當用戶下次單擊按鈕時，jQuery將刪除多餘的類，並且菜單再次變為隱藏。
CSS屬性和
對於過渡，我們可以使用transition速記屬性，也可以使用4個與過渡相關的單個屬性： transition-property ， transition-duration ， transition-timing-function和transition-delay 。 簡寫屬性以縮寫形式包含所有單個屬性。
對於動畫 ，我們擁有animation速記屬性，它代表了不少於8個單個動畫屬性，即animation-name ， animation-duration ， animation-timing-function ， animation-delay ， animation-iteration-count ， animation-direction ， animation-fill-mode和animation-play-state 。
過渡和動畫最重要的是，我們總是需要指定在狀態更改期間將被修改CSS屬性 。 進行過渡後，它看起來像這樣：

.element {
	background: orange;
	transition-property: background;
	transition-duration: 3s;
	transition-timing-function: ease-in;
}
.element:hover {
	background: red;
}

我們指定了background屬性，因為這是過渡期間將要更改的內容。
我們可以在一個過渡中更改多個CSS屬性，在這種情況下，上面的代碼將像這樣修改： transition-property: background, border; 。 我們還可以使用transition-property: all; ，如果我們不想分別指定每個屬性。
我們也可以選擇速記transition屬性。 如果這樣做，我們總是需要注意內部屬性的正確順序（請參閱docs中的語法）。

.element {
	background: orange;
	transition: background 3s ease-in;
}
.element:hover {
	background: red;
}

如果要創建動畫，則需要指定相關的keyframes 。 需要在單獨定義的@keyframes at-rules中修改CSS屬性。 以下是我們如何執行此操作的示例：

.element {
	position: relative;
	animation-name: slide;
	animation-duration: 3s;
	animation-timing-function: ease-in;
}




@keyframes slide {
	0% {
		left: 0;
	}
	50% {
		left: 200px;
	}
	100% {
		left: 400px;
	}
}

在上面的示例中，我們創建了一個非常簡單的滑動效果。 我們定義了animation-name ，然後將其綁定到我們在@keyframes slide { }中指定的3個關鍵幀。 百分比是指動畫的持續時間，因此本例中50％發生在1.5秒。
我們也可以使用簡寫animation屬性，也可以按照以下方式使用from {} to {}規則來定義關鍵幀：

.element {
	position: relative;
	animation: slide 3s ease-in;
}
@keyframes slide {
	from {
		left: 0;
	}
	to {
		left: 400px;
	}
}

制作更複雜的動畫是它自己的藝術形式，如果您有興趣，可以閱讀我們的兩個動畫教程，以了解如何創建高級字幕以及如何創建彈跳效果 。
在構建轉場和動畫時，您需要知道並非所有CSS屬性都可以設置動畫 ，因此在CSS Animatable中檢查要更改的屬性始終是一個好主意。
CSS3動畫和過渡已經很長時間與供應商前綴一起使用了，我們不再需要使用它，但是Mozilla開發人員網絡仍建議您暫時添加-webkit前綴，因為僅支持基於Webkit的瀏覽器最近取得了穩定。
翻譯自: https://www.hongkiat.com/blog/visualizing-change-css-transitions-animations/