SS動畫特效

當我們在瀏覽一個網站的時候，總是發現一些有意思的特效，如鼠標放在文字上會跳動等等。對于CSS動畫特效較差的同學和一些后端同學來實現這些功能，可能有些吃力了。

animate.css

animate.css是一個CSS動畫庫，他有我們常見的CSS動畫。

animate.css使用方法

1.通過npm下載或者到animate.css官網或git上下載animate.css文件

2.將其引入到html頁面中

3.為需要執行CSS動畫的元素添加class類，其中animated 是必填的。其次到動畫名稱（選填）

下圖是動畫名稱，動畫主要分為幾個大類，你可以注意到bonceln類的彈跳進場出場方式很容易記住。

這里填寫一張class動畫名稱表

4.我們還可以添加delay-2s 延遲播放動畫，即2秒后執行動畫。

5.下面是代碼的展示

總結

通過animate.css可以讓我們開發頁面的速度在動畫特效上更加便捷高效了，不在需要自己從網上找案例然后慢慢的進行調試，測試。當然animate.css動畫庫的動畫特效是大眾特效，如果你需要設計更好看，效果更美的特效，這你只能自己查詢網上資源自己慢慢測試了。使用animate.css可以讓開發且美觀都更快些。

擊右上方紅色按鈕關注“web秀”，讓你真正秀起來

前言

說起CSS3動畫，就必須說說 transform，translate，transition，animation這4個屬性，transform主要定義元素的動作，比如旋轉、傾斜、位移等，translate是transform里面的屬性，用于2D/3D位移。后2個主要對動作進行描述，動畫時間、速度曲線、次數等。

下面我用是一些簡單的示例，讓大家快速的入門上手:

快速開始第一個動畫

<style>
.div1{
 width: 100px;
 background: red;
 /** 動畫描述：寬度改變動畫 用時 1s*/
 transition: width 1s;
}
.div1:hover{
 width: 200px;
 background: blue;
}
</style>

<div class="div1">動畫</div>

這里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>

這里動畫從加載就開始執行，所以用了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>

transform：rotate使其div元素2D旋轉20°.當然你可以設置transform：rotateY, Y 軸的 3D 旋轉。

你還可以設置transform: translate，進行2D，3D位移；

transform: scale，進行2D，3D縮放；

transform: skew，進行2D傾斜等等。

總結

好的動畫效果，第一要素是：好的想法，有創意，才有好的成品；第二要素是：有好的實現解題思路，當有設計后，制作就需要想辦法實現效果，剝繭抽絲，一步一步來；第三要素：不畏懼的心，勇敢嘗試，多實踐，多動手，靈感往往來與你寫的過程中。

有了上面的小示例，相信小伙伴們也能自己寫寫簡單的CSS3動畫了，如果有疑問，可以評論留言，大家一起學習探討。

擊上方藍字關注“小鄭搞碼事”，每天都能學到知識，搞懂一個問題！

在移動端開發中，經常會使用到loading動畫，然而，實現 loading動畫的方式也很多，loading的展示樣式就更多了。今天這里我來展示一下其中一種有意思的loading動畫。看我怎么搞。

先看一下大概的效果圖：

對就是上面展示的這樣子。看起來像個鬧鐘在旋轉似的。

其實現原理很簡單的：

1、將圓分為左右兩個半圓作為顯示區域，溢出隱藏掉。

2、分別在左右半圓中繪制一個相同大小的半圓，將填充背景色，以供旋轉使用。

3、根據需要旋轉有背景色的半圓即可。

下面看一下具體實現的技術點：

一、dom結構

這個結構也很簡單，div.loading是相對定位，直接子元素div.left和div.right是絕對定位，設置成溢出隱藏，最后來旋轉i.bg。

二、動畫的設定

如上所示：動畫設定需要注意，旋轉的中心點。左右兩邊不一樣。

三、完美銜接

為了讓左右兩模塊完美的銜接上， 需要左邊的旋轉背景加一個1s的延遲（根據總的時間定）。

最后總結：

css3的動畫屬性好好組合利用，能夠實現好多有意思的效果。重要的是要學會利用這些看著有限的知識點來解決工作中碰到的各種問題。