編寫自己的程式碼庫(css3常用動畫的實現)

1.前言

在月初的時候，發了CSS3熱身實戰--過渡與動畫（實現炫酷下拉，手風琴，無縫滾動）。js的程式碼庫也發過兩次，兩篇文章。之前也寫了css3的熱身實戰，既然熱身完了，是時候開始封裝css3的程式碼庫了，相比起js的程式碼庫，css3的程式碼庫的邏輯性就更加簡單了！可以說只要打上註釋和一張效果圖就可以讓大家明白了其中的原理了！
我寫程式碼庫的時候，動畫效果主要是參考了三個開源專案，nec，hover.css，animate.css這三個專案的質量非常的高，建議大家去了解。
原始碼已經放到github上面了，大家可以去看，也歡迎大家star一下！ec-css。

我指出這三個庫並不是叫大家去拿別人的程式碼，稍微修改一下，或者直接拷貝到自己的專案上，然後就說是自己的專案。我是讓大家去看別人的程式碼，學習別人的實現方式，然後再用自己的方式實現，當然如果把別人的專案，增刪改查到面目全非的地步，這個我個人覺得可以說是自己的專案了！強調一點，不要直接複製別人的程式碼，放到自己的專案上，然後說是自己開發的，這是不尊重別人的成果，對自己的技術水平提升的幫助也較少。我寫文章，雖然也會給出程式碼，但是我的目的是提供大家參考的，希望給讓大家學習到知識或者發散思維，寫出更好的作品。之前也說過，我寫文章的目的是授人以漁，不是授人以魚。

還有一個就是，如果自己的文章或者專案引用，借鑑，參考了哪個專案的程式碼，最好把引用的專案給說明一下。

宣告

1.下面將會看到很多個類似這樣的舉行，都是span標籤，樣式都是給出的css

span{
        cursor: pointer;
        height: 40px;
        line-height: 40px;
        text-align: center;
        display: inline-block;
        color: #333;
        background: #ccc;
        min-width: 80px;
        padding: 0 10px;
        margin: 10px;
    }複製程式碼

2.關於class命名方式，l代表left，r代表right，t代表top，b代表bottom，c代表center，m代表middle。切記

文章比較長，但是說得就是兩點，大家看得也應該會很快
1.寫出一些hover動畫和預設動畫的執行效果，並且貼出程式碼
2.發現幾個動畫組合，和加上無限動畫，反向動畫，會有不一樣的效果，並且繼續研究，看下能不能研究出不一樣的東西！

2.hover動畫

說了那麼多，是時候進入正文了，

首先是hover動畫，關於這個概念，我解釋下，就是滑鼠移上去觸發的動畫，就是觸發了滑鼠的hover事件時能看到的動畫！下面，按照型別，一個一個的寫！

2-1.簡單動畫

2-1-1大小變化

html

<span class="ech-big">big</span>
<span class="ech-small">small</span>複製程式碼

css

.ech-big,.ech-small {
    transition: all .4s;
}
.ech-big:hover{
    transform: scale(1.2);
}
.ech-small:hover{
    transform: scale(.9);
}
複製程式碼

2-1-2形狀變化

html

<span class="ech-skew-l">skew-l</span>
<span class="ech-skew-r">skew-r</span>
<span class="ech-skew-l-t">skew-l-t</span>
<span class="ech-skew-r-t">skew-r-t</span>
<span class="ech-skew-l-b">skew-l-b</span>
<span class="ech-skew-r-b">skew-r-b</span>複製程式碼

css

.ech-skew-l, .ech-skew-r, .ech-skew-l-t, .ech-skew-r-b, .ech-skew-l-b, .ech-skew-r-t{
    transition: all .4s;
}
.ech-skew-r-t, .ech-skew-l-t {
    transform-origin: 0 100%;
}
.ech-skew-r-b, .ech-skew-l-b {
    transform-origin: 100% 0;
}
.ech-skew-l:hover {
    transform: skew(-15deg);
}
.ech-skew-r:hover {
    transform: skew(15deg);
}
.ech-skew-l-t:hover {
    transform: skew(-15deg);
}
.ech-skew-r-t:hover {
    transform: skew(15deg);
}
.ech-skew-l-b:hover {
    transform: skew(15deg);
}
.ech-skew-r-b:hover {
    transform: skew(-15deg);
}
複製程式碼

2-1-3旋轉角度變化

html

<span class="ech-grow-rotate-l">grow-rotate-l</span>
<span class="ech-grow-rotate-r">grow-rotate-r</span>
<span class="ech-rotate5">rotate5</span>
<span class="ech-rotate15">rotate15</span>
<span class="ech-rotate30">rotate30</span>
<span class="ech-rotate60">rotate60</span>
<span class="ech-rotate90">rotate90</span>
<span class="ech-rotate180">rotate180</span>
<span class="ech-rotate360">rotate360</span>
<span class="ech-rotate-5">rotate-5</span>
<span class="ech-rotate-15">rotate-15</span>
<span class="ech-rotate-30">rotate-30</span>
<span class="ech-rotate-60">rotate-60</span>
<span class="ech-rotate-90">rotate-90</span>
<span class="ech-rotate-180">rotate-180</span>
複製程式碼

css

.ech-grow-rotate-l,.ech-grow-rotate-r, .ech-rotate5, .ech-rotate15, .ech-rotate30, .ech-rotate60, .ech-rotate90, .ech-rotate180, .ech-rotate360, .ech-rotate-5,.ech-rotate-15, .ech-rotate-30, .ech-rotate-60, .ech-rotate-90, .ech-rotate-180{
transition: all .4s;
}
.ech-grow-rotate-l:hover {
    transform: scale(1.1) rotate(4deg);
}
.ech-grow-rotate-r:hover {
    transform: scale(1.1) rotate(-4deg);
}
.ech-rotate-5:hover {
    transform: rotate(-5deg);
}
.ech-rotate-15:hover {
    transform: rotate(-15deg);
}

.ech-rotate-30:hover {
    transform: rotate(-30deg);
}

.ech-rotate-60:hover {
    transform: rotate(-60deg);
}

.ech-rotate-90:hover {
    transform: rotate(-90deg);
}

.ech-rotate-180:hover {
    transform: rotate(-180deg);
}
.ech-rotate5:hover {
    transform: rotate(5deg);
}
.ech-rotate15:hover {
    transform: rotate(15deg);
}

.ech-rotate30:hover {
    transform: rotate(30deg);
}

.ech-rotate60:hover {
    transform: rotate(60deg);
}

.ech-rotate90:hover {
    transform: rotate(90deg);
}

.ech-rotate180:hover {
    transform: rotate(180deg);
}

.ech-rotate360:hover {
    transform: rotate(360deg);
}複製程式碼

2-1-4位移變化

html

<span class="ech-t">up</span>
<span class="ech-b">bottom</span>
<span class="ech-l">left</span>
<span class="ech-r">right</span>複製程式碼

css

.ech-t,.ech-bottom,.ech-top,.ech-right{
    transition: all .4s;
}
.ech-t:hover {
    transform: translate3d(0, -10px, 0);
}
.ech-b:hover {
    transform: translate3d(0, 10px, 0);
}
.ech-l:hover {
    transform: translate3d(-10px, 0, 0);
}
.ech-r:hover {
    transform: translate3d(10px, 0, 0);
}
複製程式碼

2-1-5邊框變化

html

<span class="ech-border">border</span>
<span class="ech-border-in">border-in</span>複製程式碼

css

.ech-border,.ech-border-in{
    transition: all .4s;
}
.ech-border:hover {
    box-shadow: 0 0 0 4px #09f, 0 0 1px transparent;
}

.ech-border-in:hover {
    box-shadow: inset 0 0 0 4px #09f, 0 0 1px transparent;
}複製程式碼

2-1-6陰影變化

(gif圖看得效果太難看了，大家可以去github下載看)

html

<span class="ech-shadow">shadow</span>
<span class="ech-shadow-in">shadow-in</span>
<span class="ech-shadow-write">shadow-write</span>
<span class="ech-shadow-big">shadow-big</span>複製程式碼

css

.ech-shadow,.ech-shadow-in,.ech-shadow-write,.ech-shadow-big{
    transition: all .4s;
}
.ech-shadow:hover {
    box-shadow: 0 0 10px #333;
}   
.ech-shadow-in:hover {
    box-shadow: inset 0 0 10px #333;
}
.ech-shadow-write:hover {
    box-shadow: inset 0 0 20px #fff;
}
.ech-shadow-big:hover {
    box-shadow: 0 10px 10px -10px rgba(0, 0, 0, 0.5);
    transform: scale(1.1);
}複製程式碼

2-1-7透明度變化

html

<span class="ech-fade-out">fade-out</span>
<span class="ech-fade-in">fade-in</span>複製程式碼

css

.ech-fade-out,.ech-fade-in{
    transition: all .4s;
}
.ech-fade-out:hover {
    opacity: .6;
}

.ech-fade-in {
    opacity: .5;
}

.ech-fade-in:hover {
    opacity: 1;
}    複製程式碼

2-1-8圓角變化

html

<span class="ech-rectangle">rectangle</span>
<span class="ech-radius">radius</span>複製程式碼

css

.ech-radius,.ech-rectangle{
    transition: all .4s;
}
.ech-radius {
    border-radius: 10px;
}

.ech-radius:hover {
    border-radius: 0;
}

.ech-rectangle:hover {
    border-radius: 10px;
}
複製程式碼

2-2.顏色動畫效果

這部分的動畫主要是利用:before和:after進行實現的，所以，大家如果使用的時候，切記:before和:after沒有被佔用，否則會顯示不正常

2-2-1.顏色塊變化

因為這塊內容很像，我就一大塊一起說，大家看程式碼的時候要留神注意。看程式碼看不明白，直接在github下載，然後執行檔案，邊除錯邊看效果！這樣大家就很容易明白了！

html

<span class="ech-fade">fade</span>
<span class="ech-fade-t">fade-t</span>
<span class="ech-fade-b">fade-b</span>
<span class="ech-fade-l">fade-l</span>
<span class="ech-fade-r">fade-r</span>
<span class="ech-bounce-t">bounce-t</span>
<span class="ech-bounce-b">bounce-b</span>
<span class="ech-bounce-l">bounce-l</span>
<span class="ech-bounce-r">bounce-r</span>
<span class="ech-fade-c-out">fade-c-out</span>
<span class="ech-fade-c-in">fade-c-in</span>
<span class="ech-fade-m-out">fade-m-out</span>
<span class="ech-fade-m-in">fade-m-in</span>複製程式碼

css

/*當前元素設定相對定位*/
.ech-fade, .ech-fade-t, .ech-fade-b, .ech-fade-l, .ech-fade-r, .ech-fade-c-in, .ech-fade-m-in, .ech-fade-m-out, .ech-fade-c-out, .ech-bounce-t, .ech-bounce-b, .ech-bounce-r, .ech-bounce-l {
    position: relative;
    transition: all .3s;
    z-index: 1;
}
/*當前元素的:before和:after設定絕對定位*/
.ech-fade:before, .ech-fade-t:before, .ech-fade-b:before, .ech-fade-l:before, .ech-fade-r:before, .ech-fade-c-in:before, .ech-fade-m-in:before, .ech-fade-m-out:before, .ech-fade-c-in:after, .ech-fade-m-in:after, .ech-fade-c-out:before {
    position: absolute;
    transition: all .3s;
    content: "";
    display: block;
    background: #09f;
    z-index: -1;
    width: 100%;
    height: 100%;
}
/*彈跳元素:before和:after設定絕對定位和運動曲線*/
.ech-bounce-t:before, .ech-bounce-b:before, .ech-bounce-r:before, .ech-bounce-l:before {
    transition: all .3s;
    transition-timing-function: cubic-bezier(0.52, 1.7, 0.5, 0.4);
    position: absolute;
    content: "";
    display: block;
    background: #09f;
    z-index: -1;
    width: 100%;
    height: 100%;
}

/*背景顏色和文字變化*/
.ech-fade:before {
    top: 0;
    left: 0;
    transform: scaleX(1);
    opacity: 0;
}

.ech-fade:hover:before {
    opacity: 1;
}

/*顏色從左至右變化*/
.ech-fade-l:before, .ech-bounce-l:before {
    top: 0;
    right: 0;
    transform-origin: 0 50%;
    transform: scaleX(0);
}
/*顏色從右至左變化*/
.ech-fade-r:before, .ech-bounce-r:before {
    top: 0;
    left: 0;
    transform-origin: 100% 50%;
    transform: scaleX(0);
}

/*顏色從上往下變化*/
.ech-fade-t:before, .ech-bounce-t:before {
    bottom: 0;
    left: 0;
    transform-origin: 50% 0;
    transform: scaleY(0);
}
/*顏色從下往上變化*/
.ech-fade-b:before, .ech-bounce-b:before {
    top: 0;
    left: 0;
    transform-origin: 50% 100%;
    transform: scaleY(0);
}

/*顏色垂直居中出去*/
.ech-fade-m-out:before {
    top: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    transform: scaleY(0);
}

/*水平居中出去*/
.ech-fade-c-out:before {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    transform: scaleX(0);
}

.ech-fade-c-out:hover:before {
    transform: scaleX(1);
}

/*水平居中進來*/
.ech-fade-c-in:before {
    top: 0;
    left: 0;
    transform-origin: 0 50%;
    transform: scaleX(0);
}

.ech-fade-c-in:after {
    top: 0;
    right: 0;
    transform-origin: 100% 50%;
    transform: scaleX(0);
}

/*垂直居中進來*/
.ech-fade-m-in:before {
    top: 0;
    left: 0;
    transform-origin: 50% 0;
    transform: scaleY(0);
}

.ech-fade-m-in:after {
    bottom: 0;
    left: 0;
    transform-origin: 50% 100%;
    transform: scaleY(0);
}
/*當前元素文字顏色變化*/
.ech-fade:hover, .ech-fade-t:hover, .ech-fade-b:hover, .ech-fade-l:hover, .ech-fade-r:hover, .ech-fade-c-in:hover, .ech-fade-m-in:hover, .ech-fade-m-out:hover, .ech-fade-c-out:hover, .ech-bounce-t:hover, .ech-bounce-b:hover, .ech-bounce-r:hover, .ech-bounce-l:hover {
    color: #fff;
}
/*垂直方向進來的:before變化（一半）*/
.ech-fade-m-in:hover:before, .ech-fade-m-in:hover:after {
    transform: scaleY(.51);
}
/*垂直方向進來的:before變化*/
.ech-fade-t:hover:before, .ech-fade-b:hover:before, .ech-fade-m-out:hover:before, .ech-bounce-b:hover:before, .ech-bounce-t:hover:before {
    transform: scaleY(1);
}
/*水平方向進來的:before變化（一半）*/
.ech-fade-c-in:hover:before, .ech-fade-c-in:hover:after {
    transform: scaleX(.51);
}
/*水平方向進來的:before變化*/
.ech-fade-l:hover:before, .ech-fade-r:hover:before,.ech-fade-c-out:hover:before, .ech-bounce-l:hover:before, .ech-bounce-r:hover:before {
    transform: scaleX(1);
}    複製程式碼

2-2-2.顏色上下劃線變化

這裡也是一大塊一起說，看程式碼可能會更亂，所以大家看程式碼的時候要更加留神注意。看程式碼看不明白，直接在github下載，然後執行檔案，邊除錯邊看效果！這樣大家就很容易明白了！

html

<span class="ech-overline-l">overline-l</span>
<span class="ech-overline-r">overline-r</span>
<span class="ech-underline-l">underline-l</span>
<span class="ech-underline-r">underline-r</span>
<span class="ech-underline-c">underline-c</span>
<span class="ech-underline-c-out">underline-c-out</span>
<span class="ech-overline-c">overline-c</span>
<span class="ech-overline-c-out">overline-c-out</span>複製程式碼

css

/*上劃線和下劃線變化 當前元素樣式設定相對定位*/
.ech-overline-r, .ech-overline-l, .ech-underline-r, .ech-underline-l, .ech-underline-c, .ech-overline-c, .ech-underline-c-out, .ech-overline-c-out{
    position: relative;
    transition: all .3s;
    z-index: 1;
}
/*初始化:after:before大小和絕對定位*/
.ech-overline-r:before, .ech-overline-l:before, .ech-underline-l:before, .ech-underline-r:before, .ech-underline-c:before, .ech-overline-c:before, .ech-underline-c:after, .ech-overline-c:after, .ech-underline-c-out:before, .ech-overline-c-out:before {
    position: absolute;
    transition: all .3s;
    content: "";
    display: block;
    background: #09f;
    z-index: -1;
    height: 4px;
    width: 100%;
    transform: scaleX(0);
}

/*上劃線 左右出來*/
.ech-overline-r:before {
    top: 0;
    left: 0;
    transform-origin: 100% 50%;
}

.ech-overline-l:before {
    top: 0;
    right: 0;
    transform-origin: 0 50%;
}

/*下劃線 左右出來*/
.ech-underline-r:before {
    bottom: 0;
    left: 0;
    transform-origin: 100% 50%;

}

.ech-underline-l:before {
    bottom: 0;
    right: 0;
    transform-origin: 0% 50%;
}

/**上劃線 下劃線 居中進來**/
.ech-overline-c:before {
    top: 0;
    transform-origin: 0 50%;
}

.ech-overline-c:after {
    top: 0;
    transform-origin: 100% 50%;
}

.ech-underline-c:before {
    bottom: 0;
    transform-origin: 0 50%;
}

.ech-underline-c:after {
    bottom: 0;
    transform-origin: 100% 50%;
}

.ech-overline-c:before, .ech-underline-c:before {
    left: 0;
}

.ech-overline-c:after, .ech-underline-c:after {
    right: 0;
}

/*上劃線 下劃線-居中出去 */
.ech-overline-c-out:before {
    top: 0;
    left: 0;
    right: 0;
    margin: auto;
}

.ech-underline-c-out:before {
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}
/*hover效果*/
.ech-overline-c:hover:after, .ech-overline-c:hover:before, .ech-underline-c:hover:after, .ech-underline-c:hover:before {
    transform: scaleX(.51);
}

.ech-overline-l:hover:before, .ech-overline-r:hover:before, .ech-underline-l:hover:before, .ech-underline-r:hover:before, .ech-underline-c-out:hover:before, .ech-overline-c-out:hover:before {
    transform: scaleX(1);
}
複製程式碼

2-2-3箭頭動畫

html

<span class="ech-arrow-l">arrow-l</span>
<span class="ech-arrow-r">arrow-r</span>
<span class="ech-arrow-t">arrow-t</span>
<span class="ech-arrow-b">arrow-b</span>
<span class="ech-arrow-l-move">arrow-l</span>
<span class="ech-arrow-r-move">arrow-r</span>
<span class="ech-arrow-t-move">arrow-t</span>
<span class="ech-arrow-b-move">arrow-b</span>
複製程式碼

css

.ech-arrow-l, .ech-arrow-r, .ech-arrow-t, .ech-arrow-b, .ech-arrow-l-move, .ech-arrow-r-move, .ech-arrow-t-move, .ech-arrow-b-move{
    position: relative;
    transition: all .3s;
    z-index: 1;
}
/*初始化箭頭樣式*/
.ech-arrow-l:before, .ech-arrow-r:before, .ech-arrow-t:before, .ech-arrow-b:before, .ech-arrow-l-move:before, .ech-arrow-r-move:before, .ech-arrow-t-move:before, .ech-arrow-b-move:before {
    position: absolute;
    transition: all .3s;
    content: "";
    display: block;
    z-index: -1;
    border-style: solid;
    margin: auto;
    width: 0;
    height: 0;
}

.ech-arrow-l:before, .ech-arrow-l-move:before {
    left: 0;
    top: 0;
    bottom: 0;
    border-width: 10px 10px 10px 0;
    border-color: transparent #ccc transparent transparent;
}

.ech-arrow-r:before, .ech-arrow-r-move:before {
    right: 0;
    top: 0;
    bottom: 0;
    border-width: 10px 0 10px 10px;
    border-color: transparent transparent transparent #ccc;
}

.ech-arrow-t:before, .ech-arrow-t-move:before {
    left: 0;
    top: 0;
    right: 0;
    border-width: 0 10px 10px 10px;
    border-color: transparent transparent #ccc transparent;
}

.ech-arrow-b:before, .ech-arrow-b-move:before {
    left: 0;
    bottom: 0;
    right: 0;
    border-width: 10px 10px 0 10px;
    border-color: #ccc transparent transparent transparent;
}

.ech-arrow-l-move, .ech-arrow-r-move, .ech-arrow-t-move, .ech-arrow-b-move {
    transition: transform .3s;
}
/*hover效果*/
.ech-arrow-l-move:hover {
    transform: translateX(10px);
}

.ech-arrow-r-move:hover {
    transform: translateX(-10px);
}

.ech-arrow-t-move:hover {
    transform: translateY(10px);
}

.ech-arrow-b-move:hover {
    transform: translateY(-10px);
}

.ech-arrow-l-move:hover:before, .ech-arrow-l:hover:before {
    transform: translateX(-10px);
}

.ech-arrow-r-move:hover:before, .ech-arrow-r:hover:before {
    transform: translateX(10px);
}

.ech-arrow-t-move:hover:before, .ech-arrow-t:hover:before {
    transform: translateY(-10px);
}

.ech-arrow-b-move:hover:before, .ech-arrow-b:hover:before {
    transform: translateY(10px);
}
複製程式碼

2-3較複雜動畫

2-1和2-2的內容，都是利用過渡實現效果，那麼這一塊就是利用動畫來實現效果！區別就是hover的寫法是增加一個動畫，動畫的封裝，難度就在於創意。

2-3-1閃爍效果

html

<span class="ech-flash">flash</span>複製程式碼

css

.ech-flash:hover {
    animation: flash .5s ease;
}

@keyframes flash {
    0%, 50%, 100% {
        opacity: 1;
    }
    25%, 75% {
        opacity: 0;
    }
}
複製程式碼

2-3-2鬧鐘振鈴效果

html

<span class="ech-shake-time">shake-time</span>複製程式碼

css

/*仿鬧鐘振鈴效果*/
.ech-shake-time:hover {
    animation: shake-time 1s ease;
}

@keyframes shake-time {
    0% {
        transform: scale(1);
    }
    10%, 20% {
        transform: scale(0.9) rotate(-3deg);
    }
    30%, 50%, 70%, 90% {
        transform: scale(1.1) rotate(3deg);
    }
    40%, 60%, 80% {
        transform: scale(1.1) rotate(-3deg);
    }
    100% {
        transform: scale(1) rotate(0);
    }
}
複製程式碼

2-3-3搖擺效果

html

<span class="ech-wobble-c">wobble-c</span>
<span class="ech-wobble-t">wobble-t</span>
<span class="ech-wobble-b">wobble-b</span>複製程式碼

css

.ech-wobble-t, .ech-skew-r-t, .ech-skew-l-t {
    transform-origin: 0 100%;
}

.ech-wobble-b, .ech-skew-r-b, .ech-skew-l-b {
    transform-origin: 100% 0;
}

.ech-wobble-c:hover, .ech-wobble-t:hover,.ech-wobble-b:hover {
    animation: wobble-x 1s ease-in-out;
}
@keyframes wobble-x {
    16.65% {
        -webkit-transform: skew(-12deg);
        transform: skew(-12deg);
    }
    33.3% {
        -webkit-transform: skew(10deg);
        transform: skew(10deg);
    }
    49.95% {
        -webkit-transform: skew(-6deg);
        transform: skew(-6deg);
    }
    66.6% {
        -webkit-transform: skew(4deg);
        transform: skew(4deg);
    }
    83.25% {
        -webkit-transform: skew(-2deg);
        transform: skew(-2deg);
    }
    100% {
        -webkit-transform: skew(0);
        transform: skew(0);
    }
}
複製程式碼

2-3-4搖晃效果

html

<span class="ech-swing">swing</span>複製程式碼

css

.ech-swing:hover {
    animation: swing .5s ease alternate;
}

@keyframes swing {
    20% {
        transform: rotate(15deg);
    }
    40% {
        transform: rotate(-10deg);
    }
    60% {
        transform: rotate(5deg);
    }
    80% {
        transform: rotate(-5deg);
    }
    100% {
        transform: rotate(0);
    }
}
複製程式碼

2-3-5抖動效果

html

<span class="ech-shake">shake</span>複製程式碼

css

.ech-shake:hover {
    animation: shake .5s ease;
}

@keyframes shake {
    0%, 100% {
        transform: translateX(0);
    }
    10%, 30%, 50%, 70%, 90% {
        transform: translateX(-10px);
    }
    20%, 40%, 60%, 80% {
        transform: translateX(10px);
    }
}
複製程式碼

2-3-6彈跳效果

html

<span class="ech-bounce">bounce</span>複製程式碼

css

.ech-bounce:hover {
    animation: bounce 1s ease;
}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(-30px);
    }
    60% {
        transform: translateY(-15px);
    }
}

複製程式碼

3.預設動畫

受限於篇幅的長度，我也不想分開兩篇文章寫。關於這個預設動畫，我就簡單的說一下，寫一下，我直接給一個大概的操作演示，和完整的程式碼！反正寫法這個也是比較單一，無非就是改一個類名而已。難的是動畫的一些編寫，這個需要創意，大家可以上網參考。

（完整程式碼比較多，這裡貼出，但是建議大家稍微看一下，過一下就好，因為這個只看程式碼是會懵逼的，要在瀏覽器開啟檔案，一看除錯一邊看，這樣會很簡單，很容易的明白）

html程式碼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo</title>
    <link rel="stylesheet" href="reset.css">
    <link rel="stylesheet" href="ec-css2.css">
    <style>
        .big {
            width: 500px;
            height: 500px;
            border: 1px solid #ccc;
            margin: 100px auto 0 auto;
        }

        #demo {
            width: 200px;
            height: 100px;
            margin: 200px auto;
            background: #09f;
        }

        .btn-box {
            margin: 0 auto 100px auto;
            max-width: 1200px;
            font-size: 0;
        }

        .btn-box a {
            font-size: 16px;
            display: inline-block;
            height: 40px;
            line-height: 40px;
            padding: 0 6px;
            color: #333;
            background: #ccc;
            margin: 0 0 10px 10px;
        }
        .btn-box .cur{
            background: #09f;
            color: #fff;
        }
        .an-type{
            width: 500px;
            height: 100px;
            margin: 0 auto;
        }
        .an-type a{
            font-size: 16px;
            display: inline-block;
            height: 40px;
            line-height: 40px;
            padding: 0 6px;
            color: #333;
            background: #ccc;
            margin: 0 10px 10px 0;
        }
        .an-type .cur{
            background: #09f;
            color: #fff;
        }
    </style>
</head>
<body>
<div class="big">
    <div class="" id="demo"></div>
</div>
<div class="an-type">
    <a href="javascripr:;" data-class="ec-infinite" id="infinite">infinite</a>
    <a href="javascripr:;" data-class="ec-alternate" id="alternate">alternate</a>
    <a href="javascripr:;" id="stop">stop</a>
</div>
<div class="btn-box">
    <a href="javascripr:;" data-class="ec-bounce" class="an-a">bounce</a>
    <a href="javascripr:;" data-class="ec-bounce-in-b" class="an-a">bounce-in-b</a>
    <a href="javascripr:;" data-class="ec-bounce-in-l" class="an-a">bounce-in-l</a>
    <a href="javascripr:;" data-class="ec-bounce-in-t" class="an-a">bounce-in-t</a>
    <a href="javascripr:;" data-class="ec-bounce-in-r" class="an-a">bounce-in-r</a>
    <a href="javascripr:;" data-class="ec-bounce-out-b" class="an-a">bounce-out-b</a>
    <a href="javascripr:;" data-class="ec-bounce-out-l" class="an-a">bounce-out-l</a>
    <a href="javascripr:;" data-class="ec-bounce-out-t" class="an-a">bounce-out-t</a>
    <a href="javascripr:;" data-class="ec-bounce-out-r" class="an-a">bounce-out-r</a>
    <br/>
    <a href="javascripr:;" data-class="ec-wobble" class="an-a">wobble</a>
    <a href="javascripr:;" data-class="ec-wobble-t" class="an-a">wobble-t</a>
    <a href="javascripr:;" data-class="ec-wobble-b" class="an-a">wobble-b</a>
    <br/>
    <a href="javascripr:;" data-class="ec-fade-in" class="an-a">fade-in</a>
    <a href="javascripr:;" data-class="ec-fade-in-t" class="an-a">fade-in-t</a>
    <a href="javascripr:;" data-class="ec-fade-in-b" class="an-a">fade-in-b</a>
    <a href="javascripr:;" data-class="ec-fade-in-l" class="an-a">fade-in-l</a>
    <a href="javascripr:;" data-class="ec-fade-in-r" class="an-a">fade-in-r</a>
    <a href="javascripr:;" data-class="ec-fade-out" class="an-a">fade-out</a>
    <a href="javascripr:;" data-class="ec-fade-out-t" class="an-a">fade-out-t</a>
    <a href="javascripr:;" data-class="ec-fade-out-b" class="an-a">fade-out-b</a>
    <a href="javascripr:;" data-class="ec-fade-out-l" class="an-a">fade-out-l</a>
    <a href="javascripr:;" data-class="ec-fade-out-r" class="an-a">fade-out-r</a>
    <br/>
    <a href="javascripr:;" data-class="ec-rotate-in" class="an-a">rotate-in</a>
    <a href="javascripr:;" data-class="ec-rotate-in-rb" class="an-a">rotate-in-rb</a>
    <a href="javascripr:;" data-class="ec-rotate-in-rt" class="an-a">rotate-in-rt</a>
    <a href="javascripr:;" data-class="ec-rotate-in-lb" class="an-a">rotate-in-lb</a>
    <a href="javascripr:;" data-class="ec-rotate-in-lt" class="an-a">rotate-in-lt</a>
    <a href="javascripr:;" data-class="ec-rotate-out" class="an-a">rotate-out</a>
    <a href="javascripr:;" data-class="ec-rotate-out-rb" class="an-a">rotate-out-rb</a>
    <a href="javascripr:;" data-class="ec-rotate-out-rt" class="an-a">rotate-out-rt</a>
    <a href="javascripr:;" data-class="ec-rotate-out-lb" class="an-a">rotate-out-lb</a>
    <a href="javascripr:;" data-class="ec-rotate-out-lt" class="an-a">rotate-out-lt</a>
    <br/>
    <a href="javascripr:;" data-class="ec-flip-in-x" class="an-a">flip-in-x</a>
    <a href="javascripr:;" data-class="ec-flip-in-y" class="an-a">flip-in-y</a>
    <a href="javascripr:;" data-class="ec-flip-out-x" class="an-a">flip-out-x</a>
    <a href="javascripr:;" data-class="ec-flip-out-y" class="an-a">flip-out-y</a>
    <br/>
    <a href="javascripr:;" data-class="ec-light-speed-in" class="an-a">light-speed-in</a>
    <a href="javascripr:;" data-class="ec-light-speed-out" class="an-a">light-speed-out</a>
    <br/>
    <a href="javascripr:;" data-class="ec-shake-time" class="an-a">shake-time</a>
    <a href="javascripr:;" data-class="ec-flash" class="an-a">flash</a>
    <a href="javascripr:;" data-class="ec-rubber-band" class="an-a">rubber-band</a>
    <a href="javascripr:;" data-class="ec-rubber-band-fast" class="an-a">rubber-band-fast</a>
    <a href="javascripr:;" data-class="ec-swing" class="an-a">swing</a>
    <a href="javascripr:;" data-class="ec-shake" class="an-a">shake</a>
    <a href="javascripr:;" data-class="ec-pulse-shrink" class="an-a">pulse-shrink</a>
    <a href="javascripr:;" data-class="ec-pulse" class="an-a">pulse</a>
</div>
</body>
<script src="ec-do.js"></script>
<script type="text/javascript">
    window.onload = function () {
        var oDivDemo = document.getElementById("demo"),
        oDivBox = document.getElementsByClassName("btn-box")[0],
        oAan=oDivBox.getElementsByTagName("a"),
        oInfinite=document.getElementById("infinite"),_infinite=false,
        oAlternate=document.getElementById("alternate"),_alternate=false,
        oStop=document.getElementById("stop");
        oStop.addEventListener("click",function(){
            oDivDemo.className="";
            _infinite=false;
            _alternate=false;
            ecDo.removeClass(oInfinite,"cur");
            ecDo.removeClass(oAlternate,"cur");
            ecDo.removeClass(oAan,"cur");
        })
        oInfinite.addEventListener("click",function(){
            _infinite=!_infinite;
            if(_infinite){
                ecDo.addClass(oInfinite,"cur")
                ecDo.addClass(oDivDemo,"ec-infinite");
            }
            else{
                ecDo.removeClass(oInfinite,"cur")
                ecDo.removeClass(oDivDemo,"ec-infinite");
            }
        })
        oAlternate.addEventListener("click",function(){
            _alternate=!_alternate;
            if(_alternate){
                ecDo.addClass(oAlternate,"cur")
                ecDo.addClass(oDivDemo,"ec-alternate");
            }
            else{
                ecDo.removeClass(oAlternate,"cur")
                ecDo.removeClass(oDivDemo,"ec-alternate");
            }
        })
        oDivBox.addEventListener("click", function (e) {
            var e = e || window.event;
            var target = e.target || e.srcElement, _class = "";
            if (target.nodeName.toLowerCase() === 'a') {
                ecDo.addClass(target,"cur");
                ecDo.removeClass(ecDo.siblings(target,"a"),"cur")
                _class =target.getAttribute("data-class");
                oDivDemo.className = "";
                setTimeout(function () {
                    ecDo.addClass(oDivDemo,_class);
                    if(_infinite){
                        ecDo.addClass(oDivDemo,"ec-infinite");
                    }
                    else{
                        ecDo.removeClass(oDivDemo,"ec-infinite");
                    }
                    if(_alternate){
                        ecDo.addClass(oDivDemo,"ec-alternate");
                    }
                    else{
                        ecDo.removeClass(oDivDemo,"ec-alternate");
                    }
                }, 50)
            }
        })
    }
</script>
</html>複製程式碼

css

/*動畫效果*/
.ec-bounce-in-l {
    animation: bounce-in-l 1s ease;
}
@keyframes bounce-in-l {
    0%, 60%, 75%, 90%, to {
        animation-timing-function: cubic-bezier(.215, .61, .355, 1)
    }
    0% {
        opacity: 0;
        transform: translate3d(-3000px, 0, 0)
    }
    60% {
        opacity: 1;
        transform: translate3d(25px, 0, 0)
    }
    75% {
        transform: translate3d(-10px, 0, 0)
    }
    90% {
        transform: translate3d(5px, 0, 0)
    }
    to {
        -webkit-transform: none;
        transform: none
    }
}
.ec-bounce-in-r {
    animation: bounce-in-r 1s ease;
}
@keyframes bounce-in-r {
    0%, 60%, 75%, 90%, to {
        animation-timing-function: cubic-bezier(.215, .61, .355, 1)
    }
    0% {
        opacity: 0;
        transform: translate3d(3000px, 0, 0)
    }
    60% {
        opacity: 1;
        transform: translate3d(-25px, 0, 0)
    }
    75% {
        transform: translate3d(10px, 0, 0)
    }
    90% {
        transform: translate3d(-5px, 0, 0)
    }
    to {
        -webkit-transform: none;
        transform: none
    }
}
.ec-bounce-in-b{
    animation: bounce-in-b 1s;
}
.ec-bounce-in-t{
    animation: bounce-in-t 1s;
}
@keyframes bounce-in-t {
    from, 60%, 75%, 90%, to {
        animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    }

    0% {
        opacity: 0;
        transform: translate3d(0, -3000px, 0);
    }

    60% {
        opacity: 1;
        transform: translate3d(0, 25px, 0);
    }

    75% {
        transform: translate3d(0, -10px, 0);
    }

    90% {
        transform: translate3d(0, 5px, 0);
    }

    to {
        transform: none;
    }
}
@keyframes bounce-in-b{
    from, 60%, 75%, 90%, to {
        animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    }

    0% {
        opacity: 0;
        transform: translate3d(0, 3000px, 0);
    }

    60% {
        opacity: 1;
        transform: translate3d(0, -25px, 0);
    }

    75% {
        transform: translate3d(0, 10px, 0);
    }

    90% {
        transform: translate3d(0, -5px, 0);
    }

    to {
        transform: none;
    }
}
@keyframes bounce-out-b {
    20% {
        transform: translate3d(0, 10px, 0);
    }

    40%, 45% {
        opacity: 1;
        transform: translate3d(0, -20px, 0);
    }

    to {
        opacity: 0;
        transform: translate3d(0, 2000px, 0);
    }
}

.ec-bounce-out-b {
    animation: bounce-out-b 1s;
}

@keyframes bounce-out-l {
    20% {
        opacity: 1;
        transform: translate3d(20px, 0, 0);
    }

    to {
        opacity: 0;
        transform: translate3d(-2000px, 0, 0);
    }
}

.ec-bounce-out-l {
    animation: bounce-out-l 1s;
}

@keyframes bounce-out-r {
    20% {
        opacity: 1;
        transform: translate3d(-20px, 0, 0);
    }

    to {
        opacity: 0;
        transform: translate3d(2000px, 0, 0);
    }
}

.ec-bounce-out-r {
    animation: bounce-out-r 1s;
}

@keyframes bounce-out-t {
    20% {
        transform: translate3d(0, -10px, 0);
    }

    40%, 45% {
        opacity: 1;
        transform: translate3d(0, 20px, 0);
    }

    to {
        opacity: 0;
        transform: translate3d(0, -2000px, 0);
    }
}

.ec-bounce-out-t {
    animation: bounce-out-t 1s;
}

/*心跳效果*/
.ec-pulse {
    animation: pulse 1s linear;
}
.ec-pulse-shrink {
    animation: pulse .5s linear;
}
@keyframes pulse {
    25% {
        transform: scale(1.1);
    }
    75% {
        transform: scale(0.9);
    }
}
.ec-flash {
    animation: flash .5s ease;
}
/*搖擺*/
.ec-swing {
    animation: swing .5s ease;
}
@keyframes swing {
    20% {
        transform: rotate(15deg);
    }
    40% {
        transform: rotate(-10deg);
    }
    60% {
        transform: rotate(5deg);
    }
    80% {
        transform: rotate(-5deg);
    }
    100% {
        transform: rotate(0);
    }
}
/*搖擺*/
.ec-wobble-t{
    transform-origin: 0 100%;
}

.ec-wobble-b{
    transform-origin: 100% 0;
}

.ec-wobble,.ec-wobble-t,.ec-wobble-b {
    animation: wobblex 1s ease-in-out;
}

@keyframes wobblex {
    16.65% {
        -webkit-transform: skew(-12deg);
        transform: skew(-12deg);
    }
    33.3% {
        -webkit-transform: skew(10deg);
        transform: skew(10deg);
    }
    49.95% {
        -webkit-transform: skew(-6deg);
        transform: skew(-6deg);
    }
    66.6% {
        -webkit-transform: skew(4deg);
        transform: skew(4deg);
    }
    83.25% {
        -webkit-transform: skew(-2deg);
        transform: skew(-2deg);
    }
    100% {
        -webkit-transform: skew(0);
        transform: skew(0);
    }
}
/*閃爍*/
@keyframes flash {
    0%, 50%, 100% {
        opacity: 1;
    }
    25%, 75% {
        opacity: 0;
    }
}
.ec-rubber-band {
    animation: rubber-band 1s;
}
.ec-rubber-band-fast {
    animation: rubber-band .5s;
}
@keyframes rubber-band {
    from {
        transform: scale3d(1, 1, 1);
    }

    30% {
        transform: scale3d(1.25, 0.75, 1);
    }

    40% {
        transform: scale3d(0.75, 1.25, 1);
    }

    50% {
        transform: scale3d(1.15, 0.85, 1);
    }

    65% {
        transform: scale3d(.95, 1.05, 1);
    }

    75% {
        transform: scale3d(1.05, .95, 1);
    }

    to {
        transform: scale3d(1, 1, 1);
    }
}
/*仿鬧鐘振鈴效果*/
.ec-shake-time{
    animation: shake-time 1s ease;
}

@keyframes shake-time {
    0% {
        transform: scale(1);
    }
    10%, 20% {
        transform: scale(0.9) rotate(-3deg);
    }
    30%, 50%, 70%, 90% {
        transform: scale(1.1) rotate(3deg);
    }
    40%, 60%, 80% {
        transform: scale(1.1) rotate(-3deg);
    }
    100% {
        transform: scale(1) rotate(0);
    }
}

/*彈跳變化*/
.ec-bounce{
    animation: bounce 1s ease;
}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(-30px);
    }
    60% {
        transform: translateY(-15px);
    }
}

/*震動*/
.ec-shake {
    animation: shake .5s ease;
}

@keyframes shake {
    0%, 100% {
        transform: translateX(0);
    }
    10%, 30%, 50%, 70%, 90% {
        transform: translateX(-10px);
    }
    20%, 40%, 60%, 80% {
        transform: translateX(10px);
    }
}
/*透明度進入*/
@keyframes fade-in {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.ec-fade-in {
    animation: fade-in 1s;
}

@keyframes ec-fade-in-b {
    from {
        opacity: 0;
        transform: translate3d(0, -100%, 0);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

.ec-fade-in-b {
    animation: ec-fade-in-b 1s;
}

@keyframes ec-fade-in-l {
    from {
        opacity: 0;
        transform: translate3d(-100%, 0, 0);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

.ec-fade-in-l {
    animation: ec-fade-in-l 1s;
}

@keyframes ec-fade-in-r {
    from {
        opacity: 0;
        transform: translate3d(100%, 0, 0);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

.ec-fade-in-r {
    animation: ec-fade-in-r 1s;
}

@keyframes ec-fade-in-t {
    from {
        opacity: 0;
        transform: translate3d(0, 100%, 0);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

.ec-fade-in-t {
    animation: ec-fade-in-t 1s;
}

@keyframes ec-fade-out {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

.ec-fade-out {
    animation: ec-fade-out 1s;
}

@keyframes ec-fade-out-b {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
        transform: translate3d(0, 100%, 0);
    }
}

.ec-fade-out-b {
    animation: ec-fade-out-b 1s;
}

@keyframes ec-fade-out-l {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
        transform: translate3d(-100%, 0, 0);
    }
}

.ec-fade-out-l {
    animation: ec-fade-out-l 1s;
}


@keyframes ec-fade-out-r {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
        transform: translate3d(100%, 0, 0);
    }
}

.ec-fade-out-r {
    animation: ec-fade-out-r 1s;
}

@keyframes ec-fade-out-t {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
        transform: translate3d(0, -100%, 0);
    }
}

.ec-fade-out-t {
    animation: ec-fade-out-t 1s;
}
/*旋轉進出*/
@keyframes rotate-in{
    0%{opacity:0;transform:rotate(-200deg);}
    100%{opacity:1;transform:rotate(0);}
}
.ec-rotate-in {
    animation: rotate-in 1s;
}
@keyframes rotate-in-lt{
    0%{transform-origin:left bottom;transform:rotate(-90deg);opacity:0;}
    100%{transform-origin:left bottom;transform:rotate(0);opacity:1;}
}
.ec-rotate-in-lt {
    animation: rotate-in-lt 1s;
}
@keyframes rotate-in-lb{
    0%{transform-origin:left bottom;transform:rotate(90deg);opacity:0;}
    100%{transform-origin:left bottom;transform:rotate(0);opacity:1;}
}
.ec-rotate-in-lb {
    animation: rotate-in-lb 1s;
}
@keyframes rotate-in-rt{
    0%{transform-origin:right bottom;transform:rotate(90deg);opacity:0;}
    100%{transform-origin:right bottom;transform:rotate(0);opacity:1;}
}
.ec-rotate-in-rt {
    animation: rotate-in-rt 1s;
}
@keyframes rotate-in-rb{
    0%{transform-origin:right bottom;transform:rotate(-90deg);opacity:0;}
    100%{transform-origin:right bottom;transform:rotate(0);opacity:1;}
}
.ec-rotate-in-rb {
    animation: rotate-in-rb 1s;
}

.ec-rotate-out {
    animation: rotate-out 1s;
}
@keyframes rotate-out{
    0%{transform-origin:center center;transform:rotate(0);opacity:1;}
    100%{transform-origin:center center;transform:rotate(200deg);opacity:0;}
}
.ec-rotate-out-lt {
    animation: rotate-out-lt 1s;
}
@keyframes rotate-out-lt{
    0%{transform-origin:left bottom;transform:rotate(0);opacity:1;}
    100%{transform-origin:left bottom;transform:rotate(-90deg);opacity:0;}
}
.ec-rotate-out-lb {
    animation: rotate-out-lb 1s;
}
@keyframes rotate-out-lb{
    0%{transform-origin:left bottom;transform:rotate(0);opacity:1;}
    100%{transform-origin:left bottom;transform:rotate(90deg);opacity:0;}
}
.ec-rotate-out-rt {
    animation: rotate-out-rt 1s;
}
@keyframes rotate-out-rt{
    0%{transform-origin:right bottom;transform:rotate(0);opacity:1;}
    100%{transform-origin:right bottom;transform:rotate(90deg);opacity:0;}
}
.ec-rotate-out-rb {
    animation: rotate-out-rb 1s;
}
@keyframes rotate-out-rb{
    0%{transform-origin:right bottom;transform:rotate(0);opacity:1;}
    100%{transform-origin:right bottom;transform:rotate(-90deg);opacity:0;}
}
/*翻轉進出*/
@keyframes flip-in-x {
    from {
        transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
        animation-timing-function: ease-in;
        opacity: 0;
    }

    40% {
        transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
        animation-timing-function: ease-in;
    }

    60% {
        transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
        opacity: 1;
    }

    80% {
        transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
    }

    to {
        transform: perspective(400px);
    }
}

.ec-flip-in-x {
    animation: flip-in-x 1s;
}

@keyframes flip-in-y {
    from {
        transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
        animation-timing-function: ease-in;
        opacity: 0;
    }

    40% {
        transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
        animation-timing-function: ease-in;
    }

    60% {
        transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
        opacity: 1;
    }

    80% {
        transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
    }

    to {
        transform: perspective(400px);
    }
}

.ec-flip-in-y {
    animation: flip-in-y 1s;
}

@keyframes flip-out-x {
    from {
        transform: perspective(400px);
    }

    30% {
        transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
        opacity: 1;
    }

    to {
        transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
        opacity: 0;
    }
}

.ec-flip-out-x {
    animation: flip-out-x 1s;
}

@keyframes flip-out-y {
    from {
        transform: perspective(400px);
    }

    30% {
        transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
        opacity: 1;
    }

    to {
        transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
        opacity: 0;
    }
}

.ec-flip-out-y {
    animation: flip-out-y 1s;
}

@keyframes light-speed-in {
    from {
        transform: translate3d(100%, 0, 0) skewX(-30deg);
        opacity: 0;
    }

    60% {
        transform: skewX(20deg);
        opacity: 1;
    }

    80% {
        transform: skewX(-5deg);
        opacity: 1;
    }

    to {
        transform: none;
        opacity: 1;
    }
}

.ec-light-speed-in {
    animation: light-speed-in 1s ease-out;
}

@keyframes light-speed-out {
    from {
        opacity: 1;
    }

    to {
        transform: translate3d(100%, 0, 0) skewX(30deg);
        opacity: 0;
    }
}

.ec-light-speed-out {
    animation: light-speed-out ease-in 1s;
}
/*無限次數執行動畫*/
.ec-infinite{
    animation-iteration-count: infinite;
}

.ec-alternate {
    animation-direction: alternate;
}複製程式碼

4.未知探索

好了，說完了hover動畫和預設動畫，我開發的時候，發現了這樣一些好玩的東西，我也準備繼續研究，也建議大家玩下，說不定哪天做出了了不起的東西！如下面的栗子！

下面說的動畫，不分hover動畫和預設動畫，大家注意

4-1.無限執行動畫

一個普通的動畫，加上無限執行，一般會出現很友好的效果，

但是有些時候的效果差強人意

4-2.反向動畫

在4-1的基礎上，加上方向執行動畫，也會有不一樣的效果

沒加反向動畫效果

加上反向動畫效果

4-3.組合效果

陰影效果和其它效果的組合，(gif看不出陰影效果，哎。。)

上面的幾個的栗子
css程式碼不變，區別是html程式碼，多加了一些類名

上面幾個是我在開發時候發現的栗子，這個我會繼續研究，也希望大家能研究，研究出什麼好玩的效果，或者動畫寫法，歡迎分享！

5.雞肋選擇

在寫css3程式碼庫的時候，我也發現封裝css3的一個雞肋情況。

1.css3的效果太過於靈活，多樣，封裝非常容易出現眾口難調的情況，以及每個專案的效果可能出現效果差不多，但就是不一樣，這樣就是說封裝的庫並不適合用在專案上。

2.還有一點在於，css3效果基本上每一個專案都是有用到，並且是常用，但是平常專案要用到的css3效果最多也就10個，而且也不難，手寫很快可以實現，根本沒必要去引一個外掛或者庫。

但是最後我還是堅持寫下去了，原因如下

1.如果專案開發，對動畫效果的要求基本不會達到非常的嚴格的地步，我完全可以多引一個檔案，增加我的開發效率，壓縮過後的檔案可能只有10K左右，可以接受。

2.就算在專案用不上，我也可以當作是練手，學習的作用。如果以後專案需要動畫效果，即使動畫效果跟我封裝的不一樣，我也可以看著來進行修改。

3.就算開發的時候沒使用上這個庫，萬一有些動畫，我寫過，但是忘了怎麼寫，也可以回頭看怎麼實現！

4.如果開發的時候，不知道放什麼效果好，這個庫，也能起到一定的參考作用！

5.現在多寫幾個，說不定起到一個發散思維的作用，寫了這些效果，想到了另一些效果怎麼寫，或者想到還有什麼效果可以寫，這個也是非常好的一個結果和收穫！

6.小結

好了，css3的程式碼庫封裝到這裡就差不多了，如果你能看完全篇，你已經是勇士了，證明你很有耐心，看完馬上掌握，這個對於大家來說問題不大，畢竟不是什麼邏輯性強的程式碼。我想要的效果雖然都實現了，不過以後肯定也是要修改完善的(至少看原始碼的話，我自己看得都有點亂，但是一時之間又不知道該如果整理，就先放上去了)。話說回來，通過以上的案例，希望能幫到大家，最理想就是能起到發散思維的作用，就是通過我的案例，能讓大家知道其它的一些動畫怎麼做，或者想到有什麼好看動畫效果。web前端這一行，最重要的就是多練，大家除了看別人的專案，部落格之外，一定要多練，多寫，這樣進步才會更快，知識才會記得更牢。
最後，如果大家覺得我哪裡寫得不好或者寫錯了，歡迎指出。有什麼好的想法，隨時給您寶貴的建議我！專案我也放到github上面了！有需要的可以去看下，star下ec-css！

-------------------------華麗的分割線--------------------
想了解更多，關注關注我的微信公眾號：守候書閣