設計師10大必備HTML動畫工具

TML 5已經成為Web開發者當中最流行的語言之一，“健壯的”語言有很大的生產優質萬維網內容的能力。HTML 5在近三年的增長迅猛，新引入HTML 5的技術更加的優秀。HTML 5技術被現代瀏覽器所支持，如Chrome、Firefox、Internet Explorer等等。而今天，我們將為您推薦十個HTML 5動畫工具，希望對您的工作有所幫助。

Mixeek是一款免費的軟件工具，可用于設計和交互Web動畫。該工具基于JavaScript、CSS和HTML 5。Mixeek是輕量級的、易于使用的，可替代付費動畫工具。

Animatron是一款直觀的設計與發布編輯軟件。你可以使用Animatron來設計內容，如橫幅、信息圖表和創意動畫（針對桌面電腦、移動設備以及任何你可以選擇的設備）。

你可以使用Tumult Hype來創建美麗的HTML 5 Web內容。用其創建的內容是交互的并擁有偉大的動畫功能。你可以在桌面、智能手機和iPad上使用這個框架，它不需要你有編碼知識。

Mugeda是許多創作工具包、廣告商和代理處的首選，來釋放他們的創造力并創建最優質的媒體廣告單元。該工具最知名的是它創建優質廣告單元、橫幅、插頁式廣告、可擴展和迷你游戲的能力。

HTML5 Maker常用于構建滑塊、橫幅以及用最小的努力創建令人印象深刻的圖形。這個工具是免費的，它不要求你有任何特別的編程知識。

Hippo Studios是一個很好的平臺，可以創建強大的動畫、游戲、演示文稿、應用和多媒體網站。使用Hippo Studios創建的項目被大多數瀏覽器和設備支持。

Sencha Space是一個針對基于HTML和JavaScript應用的安全應用環境。該工具幫助組織簡化了應用的開發、安全、維護以及部署到桌面、平板和智能手機。Sencha最出名的地方是它的安全性。

blysk是一款非常有用的動畫工具。它為動畫和Web設計提供了一個很好的平臺，可以為網站和其他互聯網項目構建直觀的動畫。

Radiapp是一款強大的工具，常用于創建運行時的視頻和圖形。它為現代網站提供實時的圖形編輯界面。

Createjs是一個與HTML 5 Canvas元素工作的JavaScript庫。最出名的地方是創建游戲、衍生藝術以及其他的圖形工具。它為我們提供了偉大的圖形經驗。（編譯：陳明）

原文來自：hidimba360

天我們學習的內容有：過渡，動畫，轉換，伸縮盒子。

可以說今天學習的內容都是重量級的大佬，學好了，使用css3做出酷炫的效果 So Easy！~~

1.過渡

在css3中，有一個屬性可以設置過渡效果。

它就是transition，所謂的過渡效果，指的就是以動畫的形式慢慢演化樣式屬性變化的過程。

A.案例：通過transition設置焦點過渡效果

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Document</title><style>div{width: 200px;height: 200px;margin:200px;background: url(girl.jpg);border-radius:50%;transition:all 1s linear 0.3s;cursor: pointer;}div:hover{box-shadow: 0px 0px 20px blue;}</style></head><body><div></div></body></html>

注意頁面中的代碼：

第一，我們給div添加了一個hover偽類樣式，當我們鼠標懸停在div上方的時候，會給div盒子添加一個藍色的盒子陰影。

第二，我們給div盒子添加了一個transition樣式，設置的值為：all 1s linear 0.3s;

這四個數據分別對應

transition-property(需要過渡的屬性)：如果設置為all表示所有樣式屬性都需要過渡。

transition-duration(過渡的時間):以秒作為單位，設置過渡的時間

transition-timing-function(過渡的方式):常用的有linear(勻速)，ease(先慢后快)，ease-in，ease-out，ease-in-out等

transition-delay(延遲的時間):以秒作為單位進行延遲，延遲之后開始進行過渡效果。

所以，我們通過transition這個復合屬性設置的過渡效果為：

all:需要過渡所有的屬性

1s:過渡的時間為1秒

linear:勻速過渡

0.3s:在延遲0.3秒之后開始過渡動畫。

如果大家理解了上面的描述，那么也就不難理解咱們鼠標放到div上之后，為啥會慢慢出現藍色的光暈了，就是因為咱們添加了過渡，所以，慢慢的就會給盒子添加陰影效果。

2.動畫：

在學習完了過渡之后，發現咱們可以使用transition去以動畫的形式展示樣式的改變以及變化的過程，這可以幫助我們來實現一些過渡的動畫。

但是，有的時候，我們的需求會更加的復雜，要求會更加的多變，那么，transition可能就無法滿足我們的需要了，我們需要有更加炫酷，復雜的效果呈現。

那么，動畫animation就可以滿足我們的需要。

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Document</title><style>@keyframes moveAndChange{0%{left:0px;top:0px;}25%{left:200px;top:200px;background:green;border-radius: 0;}50%{left:400px;top:200px;background:blue;border-radius: 50%;}75%{left:400px;top:0px;background:#ccc;border-radius: 0;}100%{left:0px;top:0px;background:red;border-radius: 50%;}}div{margin:200px;width: 200px;height: 200px;position: absolute;background:red;border-radius:50%;animation: moveAndChange 5s linear 0.5s infinite normal;}</style></head><body><div></div></body></html>

代碼效果如下：

同樣，讓我們來關注編寫的代碼：

1.在樣式中，首先我們使用@keyframes 來定義了一個復雜的動畫，在css3中，新增了@keyframes可以來幫助我們添加動畫。代碼如下：

/*動畫的名字叫做moveAndChange*/

@keyframes moveAndChange{

/*動畫最初的時候，將left設置為0px，top設置為0px*/

0%{

left:0px;

top:0px;

}

/*當動畫進行到25%的時候，使用動畫將left過渡到200px，top過渡到200px，

背景顏色過渡為綠色，圓角過渡為0(無圓角)*/

25%{

left:200px;

top:200px;

background:green;

border-radius: 0;

}

/*當動畫進行到50%的時候，使用動畫將left過渡到400px，top過渡到200px，

背景顏色過渡為藍色，圓角過渡為50%(正圓)*/

50%{

left:400px;

top:200px;

background:blue;

border-radius: 50%;

}

/*當動畫進行到75%的時候，使用動畫將left過渡到400px，top過渡到0，

背景顏色過渡為灰色，圓角過渡為0(無圓角)*/

75%{

left:400px;

top:0px;

background:#ccc;

border-radius: 0;

}

/*當動畫結束的時候，使用動畫將left過渡到0x，top過渡到0px，

背景顏色過渡為紅色，圓角過渡為50%(正圓)*/

100%{

left:0px;

top:0px;

background:red;

border-radius: 50%;

}

這是一個比較復雜的動畫效果，可以發現，它通過百分比的形式將一個完整的動畫拆分成了5個部分，每個部分都有不同的樣式效果，而當我們采用該動畫的元素就會按照設置的順序和樣式效果進行動畫的過渡和展示。

2.上面我們只是通過@keyframes創建了一個動畫，我們還需要通過特定的語法來使用這個動畫。

就是下面這句代碼了：

animation: moveAndChange 5s linear 0.5s infinite normal;

它是一個復合屬性，設置了6個值，分別對應：

animation-name(設置動畫的名稱)：用來設置動畫的名字，我們這里寫的是moveAndChange ，也就是說我們就是要使用我們剛剛創建的動畫。

animation-duration(設置整個動畫的時間):以秒作為單位，我們這里寫的是5s，表示整個動畫的時間為5秒

animation-timing-function(設置播放動畫的方式)：播放動畫的方式，常用的有linear(勻速)，ease(先慢后快)，ease-in，ease-out，ease-in-out等，我們使用的是linear勻速播放動畫。

animation-delay(設置動畫的延遲):以秒作為單位，我們寫的是0.5s，表示延遲0.5秒之后開始播放動畫。

animation-iteration-count(設置動畫播放的次數):播放動畫的次數，我們這里寫的是infinite ，表示動畫將會被播放無限次，如果寫數字，那么就會播放數字對應的次數。

animation-direction(設置是否反向播放動畫)：我們寫的是normal，表示正常播放動畫，如果寫的是

alternate則表示要反向播放動畫，大家也可以自己試一試這個效果。

最終，我們通過@keyframes創建動畫，通過animation設置動畫，成功完成了這個復雜的動畫效果。

3.轉換

在css3中，我們通過transform屬性可以設置元素的轉換效果，具體的效果如下：

A.平移

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Document</title><style>body{background:pink;}div{width: 200px;height: 200px;position: absolute;background: green;left:0px;top:0px;transform: translate(300px,300px);}</style></head><body><div></div></body></html>

代碼效果如下：

如上圖所示，本來div盒子的位置是left:0,top:0;

但是我們通過transform: translate(300px,300px);將盒子進行了偏移，所以，盒子的位置發生了改變。

B.旋轉

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Document</title><style>body {background: pink;}div {width: 200px;height: 200px;margin: 200px;position: absolute;background: green;left: 0px;top: 0px;transform: rotate(45deg);}</style></head><body><div></div></body></html>

代碼效果如下：

如上圖所示，本來div盒子應該是四四方方的。

但是，經過我們的代碼transform: rotate(45deg); //deg為單位，表示度數。

進行了45度的旋轉之后，呈現出來的就是一個菱形的盒子了，旋轉的正方向為順時針，負方向為逆時針。

C.縮放

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Document</title><style>body {background: pink;}div {width: 200px;height: 200px;margin: 200px;position: absolute;background: green;left: 0px;top: 0px;transform: scale(0.5,0.25);}</style></head><body><div></div></body></html>

代碼效果如下：

如上圖所示，本來盒子的寬高為200*200,而我們通過transform: scale(0.5,0.25);進行的縮放

scale的第一個參數為0.5,表示橫向縮小為0.5倍

scale的第二個參數為0.25，表示縱向縮小為0.25倍。

scale的參數如果為1，則表示不進行任何縮放，小于1就是做縮小，而大于1表示做放大。

小結：transform轉換中其實還包含了skew(傾斜)，matrix(矩陣轉換)，相對來說用到的不是特別多，所以在本文中我們便不再做介紹。

4.flex布局

Flex布局，可以簡便、完整、響應式地實現各種頁面布局。

Flex是Flexible Box的縮寫，翻譯成中文就是“彈性盒子”，用來為盒裝模型提供最大的靈活性。任何一個容器都可以指定為Flex布局。

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Document</title><style>div{box-sizing: border-box;}.parent {width: 600px;height: 200px;margin: 100px;position: absolute;background: green;left: 0px;top: 0px;display: flex;justify-content: flex-start}.parent div{width: 20%;border:1px solid #ccc;background:pink;}</style></head><body><div><div>1</div><div>2</div><div>3</div><div>4</div></div></body></html>

代碼效果如下：

如圖所示，咱們通過display:flex將.parent元素設置為了flex盒子，那么子元素將會按照justify-content設置的方式進行元素的排列，目前看來，和我們沒有設置flex盒子的效果是一致的。

接下來我們更改一下，將justify-content設置為flex-end，效果如下圖所示：

所以我們就應該發現，flex-start是讓所有的子元素從父元素的左側開始排列

而flex-end是讓所有的子元素從元素的右側開始排列。

我們再來更改一下，將justify-content設置為center，效果如下圖所示：

更厲害了，子元素在父盒子的中央位置排列顯示了。

然后，我們再將justify-content設置為space-around，效果如下圖所示：

它是平均分配的形式為每一個子元素設置了間距，但是看起來有點變扭。

所以我們推薦將justify-content設置為space-between，效果如下圖：

我們還可以通過flex-wrap來設置子元素是否換行顯示，以及flex-direction設置子元素排列的順序。

這兩個屬性可以設置的值如下：

flex-wrap: nowrap;//不換行，會自動收縮

flex-wrap: warp;//換行，會自動收縮

flex-wrap: warp-reverse;//反轉，從默認的從上到下排列反轉為從下到上。

flex-direction:row; //從左至右一行一行進行子元素的排列

flex-direction:column; //從上到下一列一列進行子元素的排列

flex-direction:row-reverse; //從右至左一行一行進行子元素的排列

flex-direction:column-reverse; //從下到上一列一列進行子元素的排列

案例代碼如下：

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Document</title><style>div{box-sizing: border-box;}.parent {width: 600px;height: 200px;margin: 100px;position: absolute;background: green;left: 0px;top: 0px;display: flex;justify-content: space-between;flex-wrap: nowrap;flex-direction: row-reverse;}.parent div{width: 20%;border:1px solid #ccc;background:pink;}</style></head><body><div><div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div></div></body></html>

我們設置了flex-wrap: nowrap;（不換行，壓縮所有的子元素在一行中顯示），以及flex-direction: row-reverse;（反向排列）

代碼效果如下：

如果設置為flex-wrap: warp（換行顯示無法在一行顯示的子元素），則效果如下：

如果將flex-direction: column;,則會縱向排列元素，效果如下圖：

除了上面的這些給伸縮盒子父元素設置的樣式之外，我們還可以可以伸縮盒子的子元素設置flex屬性，用來設置平均分配整個父盒子的空間。

代碼如下：

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Document</title><style>div{box-sizing: border-box;}.parent {width: 600px;height: 200px;margin: 100px;position: absolute;background: green;left: 0px;top: 0px;display: flex;justify-content: space-between;}.parent div{flex:1;width: 20%;border:1px solid #ccc;background:pink;}</style></head><body><div><div>1</div><div>2</div><div>3</div><div>4</div></div></body></html>

效果如下：

如上圖所示，每個盒子平均分配了父盒子的空間，原本寬度為20%，現在被拉伸了。

除此之外，咱們還可以使用flex屬性進行進一步的設置，代碼如下：

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Document</title><style>div{box-sizing: border-box;}.parent {width: 600px;height: 200px;margin: 100px;position: absolute;background: green;left: 0px;top: 0px;display: flex;justify-content: space-between;}.parent div:nth-of-type(1){flex:1;border:1px solid #ccc;background:red;}.parent div:nth-of-type(2){flex:2;border:1px solid #ccc;background:green;}.parent div:nth-of-type(3){flex:2;border:1px solid #ccc;background:blue;}.parent div:nth-of-type(4){flex:1;border:1px solid #ccc;background:pink;}</style></head><body><div><div>1</div><div>2</div><div>3</div><div>4</div></div></body></html>

效果如下圖：

我們分別給四個子盒子設置了flex:1 , flex:2, flex:2 ,flex:1.

這是什么意思呢？

四個flex加起來一共是6.那么第一個盒子就占據整個父盒子的1/6寬度。

同理，另外三個盒子分別占據2/6,2/6,1/6的寬度，所以就形成了我們現在看到的效果。

原文來源于：黑馬程序員社區

學習資源：

想學習css，可以關注：黑馬程序員頭條號，后臺回復：css

擊右上方紅色按鈕關注“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動畫了，如果有疑問，可以評論留言，大家一起學習探討。

在線咨詢

上一篇：JavaScript九九乘法口訣表多種實現
下一篇：CSS各種邊框背景大全

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

設計師10大必備HTML動畫工具

前言

快速開始第一個動畫

快速開始第二個動畫

快速開始第三個動畫

總結

您的項目需求