整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
我們看到設計精美的科技巨頭網站（如Apple或微軟）或特斯拉或梅賽德斯等汽車公司時，我們每個人都會感到震驚。
使這些網站脫穎而出的因素，往往是吸引人的動畫和效果，讓我們一次又一次地看。
那么，他們如何使網站如此驚人地互動？
有沒有想過這些網站上的動畫實際上是如何運作的？
您是否希望為您的企業設計一個同樣優雅和互動的網站？
如果是的話，那就別再看了。
請繼續閱讀，因為這是一個廣泛的摘錄，涵蓋了CSS動畫和變換的基礎知識，可以極大地幫助您實現商業網站的相同功能。
如果您剛剛進入前端開發領域，或者希望擴展您對前端開發的理解，那么請繼續閱讀此博客，因為在最后，您將全面了解CSS。
CSS或層疊樣式表是您會注意到的Web應用程序的相當一部分。
雖然CSS為Web應用程序設置了樣式，但HTML或超文本標記語言構成了它。
動畫在改善用戶體驗方面發揮著關鍵作用，因為它們有助于提供改進的視覺反饋，并有助于與網站進行交互。
CSS 3具有豐富的內置屬性，大大有助于動畫元素，并且在所有主流瀏覽器中也是如此。
但是 - 強大的力量，更大的責任。
動畫需要明智地使用，否則你最終可能會創建一個比交互式更令人分心的頁面。動畫的整個目的是作為一種輔助，而不是在使用Web應用程序時的障礙。
根據谷歌的一份報告，幾乎50％的網絡流量來自移動設備。因此，任何企業都需要創建適合移動設備的動畫。
對CSS（最好是CSS 3），HTML和某些jQuery 有基本的了解也很有必要。jQuery是一個Javascript庫，可以幫助開發人員使用網站的元素。這方面的技術術語是 - DOM操作。
由于您的目標受眾可能會有所不同，因此您可能使用多種網絡瀏覽器（Mozilla Firefox，Google Chrome，Safari，Opera，Internet Explorer），因此需要滿足所有這些需求。
CSS動畫有三個重要方面：
描述CSS中動畫和變換的關鍵元素的流程圖。
變換有助于以各種奇妙的方式改變您的網頁元素 - 從移動元素到重新調整大小，從旋轉元素到傾斜它。
最好的部分 - 您可以在不改變文檔流程的情況下更改任何內容。
變換有四個重要方面：
讓我們深入挖掘一下，好嗎？
1.Translate
基于Translate將對象從一個點移動到另一個點基本上。
資料來源：0fps.net
Translate會更改元素的坐標。它用于更改2D平面上組件的外觀。
Translate意味著在網頁上簡單地將元素從一個位置移動到另一個位置。您可以在X軸，Y軸或兩者上平移對象。
Moves the element on the X-axis Syntax: transform: translateX(200px); or transform: translateX(-200px); Moves the element on the Y-axis Syntax: transform: translateY(200px); or transform: translateY(-200px); Using shorthand Syntax: transform: translate(x-axis, y-axis) Example: transform: translate(200px, 200px); Alert! transform: translate(200px); [will only translate the element along the X-axis]
2.Scale
資料來源：camo.envatousercontent.com
人們可以使用圖像的大小以及軸X和Y.縮放會扭曲元素的形狀并降低元素的質量。大于1的數字將增加大小，小于1的小數將減小大小。
Scaling along the X-axis - transform: scaleX(3); Scaling along the Y-axis - transform: scaleY(0.5); Using the shorthand - for scaling along X and Y axis together - transform: scale(3 , 0.5); or transform: scale(0.5);
3.Rotate
您可以順時針或逆時針旋轉元素。使用的測量單位是度。正值將順時針旋轉元素，反之亦然。這種旋轉也會沿X，Y和Z軸發生。
資料來源：gamedev.stackexchange.com
理解CSS動畫中的旋轉是最棘手的部分之一，因此很多人無法利用此功能的真正潛力。
沿著X軸
想象一下，棉花糖在篝火上旋轉時被烤。您必須將元素可視化以與X軸一起轉換為頁面，這就是X軸上的旋轉效果。我們不會看到3D旋轉，我們能夠看到的是元素高度的變化。
Syntax: transform: rotateX(45deg);
沿著Y軸
想象一個桿子上的舞者。元素將沿Y軸旋轉到頁面中。你會注意到的是組件的寬度變化了。
Syntax: transform: rotateY(45deg);
沿Z軸
這是使用旋轉時可以使用的最佳方向，因為您可以看到實際旋轉的元素。也可以分別用正和負旋轉值修改順時針和逆時針運動。為此，嘗試想象箭頭進入頁面并且元素相對于該箭頭旋轉。
transform: rotateZ(45deg) – clockwise rotation transform: rotateZ(-45deg) – counterclockwise rotation
Skew
4.gif
Skew元件意味著傾斜。它具有正值和負值，并且像旋轉一樣，它也以度來度量。
正X值將元素向左彎曲，反之亦然，對于負X.同樣，正Y值向下傾斜元素，反之亦然。默認情況下，如果變換中未指定X或Y，則它將相對于X軸移動元素。
Along X-axis transform: skewX(45deg) or skew(45deg); Along Y-axis transform: skewY(80deg);
5.組合變換
也可以將多個轉換應用于單個轉換語句中。順序確實很重要（有時），因為第二個變換將應用于第一個變換，第三個變換將應用于前兩個變換的結果。
資料來源：commons.wikimedia.org
transform: translateX(200px) rotateX(45deg) scaleY(1.5) skewX(45deg);
所有這些變換都將對某些用戶事件生效，例如懸停，點擊，焦點，活動等。要查看動作中的魔法，您可以在這些事件中添加變換。
.element-to-animate{
display: block
}
.element-to-animate:hover{
transform: translateX(200px) rotateX(45deg) scaleY(1.5) skewX(45deg);
}
資料來源：mozillademos.org
如果您有機會查看上面的代碼，您可能會注意到在狀態更改期間懸停時的混蛋; 這恰恰是Transitions的目的。Transitions有助于使動畫流暢。
可以借助以下屬性控制轉換：
transition-property
這些是可以使用轉換的CSS屬性。其范圍從使用邊距和填充到背景和邊框。您可以將轉換應用于特定功能或完整列表。可在此處找到此權限范圍內所有屬性的完整列表。
將transition屬性應用于特定的CSS屬性
transition-property: background-color;
將轉換應用于整個CSS屬性列表
transition-property: all;
transition-duration
動畫將在其中播放的持續時間。這可以很容易地以秒（s）或毫秒（ms）來測量。建議使用秒，因為它使它們易于閱讀 - 即使你辦公室的同事也不會被你惹惱！
transition-duration: 0.5s;
transition-timing-function
速度可以通過動畫來改變用戶體驗; 因此建議控制它。您可以通過使用transition-timing-function來實現它。
CSS 3團隊非常友好地為我們提供了一些內置的速度值，如ease, ease-in, ease-in-out
如果你希望掌握速度的全部命令 - 使用Bezier曲線。
transition-timing-function: ease; transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
transition-delay
這有助于在啟動動畫的觸發事件和動畫的實際開始之間創建暫停。簡單地說，轉換延遲 - 延遲動畫。它以秒（s）或毫秒（ms）為單位進行測量。
transition-delay: 0.5s;
速記：
transition: (property) (duration) (transition-timing-function) (transition-delay);
兩個面向時間的功能的順序，即持續時間和轉換延遲問題 ！
Transforms和Transitions一起使用
7.gif
狀態1：NORMAL
.element-to-animate display: block; transition: transform 1s ease 0.2s, background 1s; }
狀態2：HOVER
.element-to-animate:hover{ background: black; transform: translateX(200px); }
對于在狀態1和狀態2之間轉換，可以將轉換分別應用于所有屬性和單個時序，或者如果要在狀態2中的所有屬性上應用轉換，則：
transition: all 1s ease 0.2s;
資料來源：css-tricks.com
關鍵幀有助于在特定時間將動畫從一個更改為另一個。
可以通過兩種方式使用關鍵幀：
1.從…到…
在這種方法中，動畫期間只有2個狀態 - 開始狀態和結束狀態。
句法：
@keyframes animation_name {
from { }
to { }
}
使元素（例如，Car）動畫化以從其初始位置水平移動：
@keyframes drive{
from {
transform: translateX(-200);
}
to {
transform: translateX(1000px);
}
}
.car{
animation-name: drive;
animation-duration: 3s;
animation-fill-mode: forwards;
animation-delay: 2s;
animation-iteration-count: infinite;
animation-timing-function: ease-in;
animation-direction: normal;
}
2.百分比方法
我們不能在@keyframes中使用from-to，因為現在有超過1個狀態。百分比方法將動畫分解為各種中間狀態，包括開始和結束狀態。起始狀態用0％表示，結束狀態用100％表示。可以有多少中間狀態，但建議在整個過程中保持狀態的隔離。
示例：0% — 25% — 50% — 75% — 100%
@keyframes jump{
0% { transform: translateY(-50px) }
50% { transform: translateY(-100px) }
100% { transform: translateY(-50px) }
}
?動畫速記
也可以使用這種簡潔的格式來編寫動畫：
animation: (animation-name) (animation-duration) (animation-fill-mode) (animation-timing-function) (animation-iteration-count) (animation-direction) (animation-delay);
注意：動畫延遲將始終在動畫持續時間之后出現。除了它們 - 時間導向的功能和其他屬性的順序無關緊要。
例：
.car{
animation-name: drive;
animation-duration: 3s;
animation-fill-mode: forwards;
animation-delay: 2s;
animation-iteration-count: infinite;
animation-timing-function: ease-in;
animation-direction: normal;
}
Can be re-written as:
.car{
animation: drive 3s ease-in infinite normal 2s;
}
我們希望在“car”元素上添加兩個動畫 - 驅動和跳轉。我們可以通過使用“鏈接動畫”和單行代碼完成此操作。
?什么是鏈接動畫？
使用CSS輕松播放多個動畫。逗號分離技術可用于鏈接動畫并運行一個動畫。例如，
···
.car{
animation: drive 3s ease-in infinite normal 2s, jump 2s ease 4 alternate reverse;
}
···
動畫屬性分類：
In From – To Approach: reverse: to - from alternate: from-to -> to-from -> from-to alternate-reverse: to-from -> from-to -> to-from In Percentage Approach reverse: 100% - 0% alternate: 0% - 100% -> 100% - 0% -> 0% - 100% alternate-reverse: 100% - 0% ->0% - 100% ->100% - 0%
一開始習慣CSS可能有點復雜。但是一旦你習慣了，你就會發現CSS動畫和變換非常奇妙。
謝謝閱讀。我們希望這篇文章能幫到你。如果確實如此，請大家豎起大拇指，如果您有任何疑問，請隨時放棄您的意見。此外，如果您想要分享您想要分享的CSS變換或動畫的令人興奮的用途，我們很樂意聽取您的意見。
翻譯自：https://medium.com/engineerbabu/a-detailed-guide-to-css-animations-and-transitions-b544502c089c
擊右上方紅色按鈕關注“web秀”，讓你真正秀起來
說起CSS3動畫，就必須說說 transform，translate，transition，animation這4個屬性，transform主要定義元素的動作，比如旋轉、傾斜、位移等，translate是transform里面的屬性，用于2D/3D位移。后2個主要對動作進行描述，動畫時間、速度曲線、次數等。
如何快速上手基礎的CSS3動畫
下面我用是一些簡單的示例，讓大家快速的入門上手:
<style>
.div1{
width: 100px;
background: red;
/** 動畫描述：寬度改變動畫 用時 1s*/
transition: width 1s;
}
.div1:hover{
width: 200px;
background: blue;
}
</style>
<div class="div1">動畫</div>
如何快速上手基礎的CSS3動畫
這里hover事件時改變寬度和背景顏色，用transition來描述動畫，由于我們只對width進行了描述，所以背景色，鼠標指上去，會立馬變色，并不會有漸變的過程。
這里為什么用transition而不用animation？那就要說說他們直接的區別了。
transition需要觸發一個事件， 而animation在不需要觸發任何事件的情況下也可以顯式的隨著時間變化來改變元素css的屬性值，從而達到一種動畫的效果。transition屬性是一個簡單的動畫屬性，非常簡單非常容易用。可以說它是animation的簡化版本，是給普通做簡單網頁特效用的。
現在明白了吧，因為我們用的hover事件，所以要用transition。
下面請看第二個例子
<style>
.div1{
width: 100px;
background: red;
/** 動畫描述：寬度顏色改變動畫 用時 1s infinite（無限次）*/
animation: second 1s infinite;
color: #fff;
}
@keyframes second{
/**開始（可以用百分比表示）*/
from {
width: 100px;
background: red;
}
/**結束（可以用百分比表示）*/
to {
width: 200px;
background: blue;
}
/** or */
/**開始*/
0% {
width: 100px;
background: red;
}
/**中間可以加多個區間*/
/**結束*/
100% {
width: 200px;
background: blue;
}
}
</style>
<div class="div1">動畫</div>
如何快速上手基礎的CSS3動畫
這里動畫從加載就開始執行，所以用了animation，改變寬度和背景色，用時1s，并且無限次循環執行。@keyframes規則是創建動畫。 -webkit-（chrome/safari）, -ms-(ie) 或 -moz-(firefox) 用于兼容不同瀏覽器。
<style>
.div1{
width: 100px;
background: red;
animation: second 1s infinite;
color: #fff;
}
@keyframes second{
100% {
transform: rotate(20deg);
}
}
</style>
<div class="div1">動畫</div>
如何快速上手基礎的CSS3動畫
transform：rotate使其div元素2D旋轉20°.當然你可以設置transform：rotateY, Y 軸的 3D 旋轉。
如何快速上手基礎的CSS3動畫
你還可以設置transform: translate，進行2D，3D位移；
如何快速上手基礎的CSS3動畫
transform: scale，進行2D，3D縮放；
如何快速上手基礎的CSS3動畫
transform: skew，進行2D傾斜等等。
如何快速上手基礎的CSS3動畫
好的動畫效果，第一要素是：好的想法，有創意，才有好的成品；第二要素是：有好的實現解題思路，當有設計后，制作就需要想辦法實現效果，剝繭抽絲，一步一步來；第三要素：不畏懼的心，勇敢嘗試，多實踐，多動手，靈感往往來與你寫的過程中。
有了上面的小示例，相信小伙伴們也能自己寫寫簡單的CSS3動畫了，如果有疑問，可以評論留言，大家一起學習探討。
ss動畫就是元素從一種樣式過渡到另一種樣式的過程。常見的動畫效果很多，比如，平移、旋轉、縮放等，css實現動畫的方式有以下幾種：
1、transition：實現漸變動畫
2、transform：實現轉變動畫
3、animation：實現自定義動畫
一、實現漸變動畫
1. 語法
transition：property duration timing-function delay；
2.子屬性介紹
transition-property：填寫需要變化的css屬性；
transition-duration：完成過渡效果需要的時間單位(s或者ms)；
transition-timing-function：指定過渡函數，規定效果的速度曲線；
transition-timing-function具體的值可以看下面的表格：
transition-delay：動畫效果的延遲觸發時間(單位ms或者s)。
并不是所有屬性都能過渡，比如display: none 到 display: block。
3.下面讓我們看一個完整的例子
html代碼如下：
<div class="box"></div>
css代碼如下：
<style>
.box{
width: 200px;
height: 200px;
background: #6697ea;
transition-property: width,height,background-color,border-radius;
transition-duration: 2s;
transition-timing-function: ease-in;
transition-delay: 500ms;
/*簡寫*/
/*transition: all 2s ease-in 500ms;*/
}
.box:hover{
width: 300px;
height: 300px;
background: #cbb3d5;
border-radius: 50%;
}
</style>
效果如下：
二、實現轉變動畫
transform屬性應用于2D 或 3D轉換。該屬性允許我們能夠對元素進行旋轉、縮放、傾斜、移動這四類操作。
1. 旋轉(rotate)：主要分為2D旋轉和3D旋轉。
1.1 2D旋轉
transform:rotate(45deg); //順時針旋轉45度
1.2 3D旋轉
圍繞原地到(x,y,z)的直線進行3D旋轉
transform:rotate(x,y,z,angle);
2. 縮放(scale)：一般用于元素的大小收縮設定。主要分為2D縮放和3D縮放。
2.1 2D縮放
transform:scale(0.5);
transform:scale(0.5,2);
2.2 3D縮放
transform:scale3d(x,y,z);
transform:scaleX(x);
transform:scaleY(y);
transform:scaleZ(z);
3. 傾斜(skew)：主要用于對元素的樣式傾斜。
transform:skew(30deg);
transform:skew(30deg,30deg);
4.移動(translate)：主要用于將元素移動。主要分為2D旋轉和3D旋轉。
4.1 2D移動
transform:translate(45px);
transform:translate(45px,150px);//沿著X軸和Y軸同時移動
4.2 3D移動
transform:translateX(45px);//僅僅在X軸移動
transform:translateY(45px);//僅僅在Y軸移動
transform:translateZ(45px);//僅僅在Z軸移動
transform:translate3d(x,y,z);//在X,Y,Z軸上都移動
5.基準點 transform-origin
6.一般配合transition過度使用。transform不支持inline元素，使用之前把它變為block。
為方便演示，可以看如下效果：
三、實現自定義動畫
為了實現更靈活的動畫效果，css3還提供了自定義動畫的功能，關鍵幀動畫@keyframes通常搭配 animation 屬性一起使用，首先學習怎么定義關鍵幀動畫
1.@keyframes 規則
2.animation屬性
3.下面讓我們看一個完整的例子
html代碼如下：
<div class="head">
<div class="eyes-one"></div>
<div class="eyes-two"></div>
<div class="smile"></div>
</div>
css代碼如下：
.head {
-webkit-animation-name: up-down;
animation-name: up-down;
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
width: 50.2vmin;
height: 50.2vmin;
background: #ffffff;
overflow: hidden;
border-radius: 50%;
background: #4b96ca;
}
.head .eyes-one, .head .eyes-two {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
width: 14.5vmin;
height: 14.5vmin;
background: white;
border-radius: 50%;
overflow: auto;
position: absolute;
}
.head .eyes-one {
-webkit-animation-name: bounce;
animation-name: bounce;
-webkit-animation-duration: 1.4s;
animation-duration: 1.4s;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
top: -9.5vmin;
left: 2.5vmin;
}
.head .eyes-one:before {
content: "";
position: absolute;
width: 9.2vmin;
height: 9.2vmin;
background: #1f2033;
top: 1.8vmin;
left: 0.9vmin;
border-radius: 50%;
}
.head .eyes-two {
-webkit-animation-name: bounce;
animation-name: bounce;
-webkit-animation-duration: 1.4s;
animation-duration: 1.4s;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
top: -9.5vmin;
left: -31.5vmin;
}
.head .eyes-two:before {
content: "";
position: absolute;
width: 9.2vmin;
height: 9.2vmin;
background: #1f2033;
top: 1.8vmin;
left: 3.9vmin;
border-radius: 50%;
}
.head .smile {
-webkit-animation-name: bounces;
animation-name: bounces;
-webkit-animation-duration: 1.4s;
animation-duration: 1.4s;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
width: 8vmin;
height: 2vmin;
background: none;
left: -13.5vmin;
top: 11.8vmin;
border-bottom: 1vmin solid black;
border-left: 1vmin solid black;
border-right: 1vmin solid black;
border-radius: 0 0 15vmin 15vmin;
}
@-webkit-keyframes up-down {
0% {top: 2vmin;}
25% {top:0vmin;}
50% {top: 2vmin;}
75% {top: 0vmin;}
100% {top: 2vmin;}
}
@keyframes up-down {
0% {top: 2vmin;}
25% {top:0vmin;}
50% {top: 2vmin;}
75% {top: 0vmin;}
100% {top: 2vmin;}
}
@-webkit-keyframes bounce {
0% {top: -2vmin;}
25% {top: -12vmin;}
50% {top: -2vmin;}
75% {top: -12vmin;}
100% {top: -2vmin;}
}
@keyframes bounce {
0% {top: -2vmin;}
25% {top: -12vmin;}
50% {top: -2vmin;}
75% {top: -12vmin;}
100% {top: -2vmin;}
}
@-webkit-keyframes bounces {
0% {top: 15vmin;}
25% {top: 5vmin;}
50% {top: 15vmin;}
75% {top: 5vmin;}
100% {top: 15vmin;}
}
@keyframes bounces {
0% {top: 15vmin;}
25% {top: 5vmin;}
50% {top: 15vmin;}
75% {top: 5vmin;}
100% {top: 15vmin;}
}
效果如下：
總結
其實大家看完會發現，css3動畫可以實現很多有趣的效果，有興趣的同學可以試著去寫寫
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
