編寫自己的程式碼庫：CSS3 常用動畫的實現

發表於2017-08-16

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;
    }

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>

1 2	<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);
}

.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>

skew-l

skew-r

skew-l-t

skew-r-t

skew-l-b

skew-r-b

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);
}

.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

<pre class="lang:default decode:true">
<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>

grow-rotate-l

grow-rotate-r

rotate5

rotate15

rotate30

rotate60

rotate90

rotate180

rotate360

rotate-5

rotate-15

rotate-30

rotate-60

rotate-90

rotate-180

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);
}

.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>

up

bottom

left

right

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);
}

.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>

1 2	<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;
}

.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>

shadow

shadow-in

shadow-write

shadow-big

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);
}

.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>

1 2	<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;
}

.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>

1 2	<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;
}

.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>

fade

fade-t

fade-b

fade-l

fade-r

bounce-t

bounce-b

bounce-l

bounce-r

fade-c-out

fade-c-in

fade-m-out

fade-m-in

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);
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

/*當前元素設定相對定位*/

.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>

overline-l

overline-r

underline-l

underline-r

underline-c

underline-c-out

overline-c

overline-c-out

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);
}

/*上劃線和下劃線變化當前元素樣式設定相對定位*/

.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>

arrow-l

arrow-r

arrow-t

arrow-b

arrow-l

arrow-r

arrow-t

arrow-b

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);
}

.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>

1	<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;
    }
}

.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>

1	<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);
    }
}

/*仿鬧鐘振鈴效果*/

.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>

wobble-c

wobble-t

wobble-b

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);
    }
}

.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>

1	<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);
    }
}

.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>

1	<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);
    }
}

.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>

1	<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);
    }
}

.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.預設動畫

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

（不知道為什麼，gif截大圖放不上來，就放了張小的，大家結果下面的jpg一起看把，就是通過下面的按鈕，展示動畫，大家也可以在github下面下載程式碼看下）

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

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>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

<!DOCTYPE html>

<head>

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

<a href="javascripr:;" data-class="ec-infinite" id="infinite">infinite</a>

<a href="javascripr:;" data-class="ec-alternate" id="alternate">alternate</a>

</div>

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

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

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

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

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

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;
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

227

228

229

230

231

232

233

234

235

236

237

238

239

240

241

242

243

244

245

246

247

248

249

250

251

252

253

254

255

256

257

258

259

260

261

262

263

264

265

266

267

268

269

270

271

272

273

274

275

276

277

278

279

280

281

282

283

284

285

286

287

288

289

290

291

292

293

294

295

296

297

298

299

300

301

302

303

304

305

306

307

308

309

310

311

312

313

314

315

316

317

318

319

320

321

322

323

324

325

326

327

328

329

330

331

332

333

334

335

336

337

338

339

340

341

342

343

344

345

346

347

348

349

350

351

352

353

354

355

356

357

358

359

360

361

362

363

364

365

366

367

368

369

370

371

372

373

374

375

376

377

378

379

380

381

382

383

384

385

386

387

388

389

390

391

392

393

394

395

396

397

398

399

400

401

402

403

404

405

406

407

408

409

410

411

412

413

414

415

416

417

418

419

420

421

422

423

424

425

426

427

428

429

430

431

432

433

434

435

436

437

438

439

440

441

442

443

444

445

446

447

448

449

450

451

452

453

454

455

456

457

458

459

460

461

462

463

464

465

466

467

468

469

470

471

472

473

474

475

476

477

478

479

480

481

482

483

484

485

486

487

488

489

490

491

492

493

494

495

496

497

498

499

500

501

502

503

504

505

506

507

508

509

510

511

512

513

514

515

516

517

518

519

520

521

522

523

524

525

526

527

528

529

530

531

532

533

534

535

536

537

538

539

540

541

542

543

544

545

546

547

548

549

550

551

552

553

554

555

556

557

558

559

560

561

562

563

564

565

566

567

568

569

570

571

572

573

574

575

576

577

578

579

580

581

582

583

584

585

586

587

588

589

590

591

592

593

594

595

596

597

598

599

600

601

602

603

604

605

606

607

608

609

610

611

612

613

614

615

616

617

618

619

620

621

622

623

624

625

626

627

628

629

630

631

632

633

634

635

636

637

638

639

640

641

642

643

644

645

646

647

648

649

650

651

652

653

654

655

656

657

658

659

660

661

662

663

664

665

666

667

668

669

670

671

672

673

674

675

676

677

678

679

680

681

682

683

684

685

686

687

688

689

690

691

692

693

694

695

696

697

698

699

700

701

702

703

704

705

706

707

708

709

710

711

712

713

714

715

716

717

718

719

720

721

722

723

724

725

726

727

728

729

730

731

732

733

734

735

736

737

/*動畫效果*/

.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！

編寫自己的程式碼庫(css3常用動畫的實現)
2017-12-06
CSSS3動畫
編寫自己的程式碼庫（javascript常用例項的實現與封裝）
2017-07-20
JavaScript封裝
編寫自己的程式碼庫（javascript常用例項的實現與封裝–續）
2017-08-08
JavaScript封裝
css3常用動畫+動畫庫
2017-02-21
CSSS3動畫
IEDA編寫程式碼常用的快捷鍵
2018-12-12
自己寫的部分實用的程式碼
2006-05-13
css3實現的loadding載入動畫程式碼例項
2017-02-23
CSSS3動畫
自己整理的css3動畫庫，附下載連結
2018-04-27
CSSS3動畫
css3實現顫動的動畫
2019-02-16
CSSS3動畫
自已做動畫及編寫程式搞清楚最大堆的實現原理
2020-06-28
動畫
css3實現的簡單動畫效果
2017-02-25
CSSS3動畫
Zen Coding 快速編寫HTML/CSS程式碼的實現
2013-06-19
HTMLCSS
CSS3實現流星動畫
2018-03-19
CSSS3動畫
css3和js實現的大白動畫效果
2017-04-14
CSSS3JS動畫
如何編寫富有表現力的程式碼？
2015-04-17
CSS3實現的多重背景效果程式碼
2017-02-11
CSSS3
編寫優雅程式碼的最佳實踐
2018-04-24
我自己的程式碼編輯器-sublime text 3 及常用外掛
2016-11-27
基於css3動畫實現的旅行的小車
2017-07-22
CSSS3動畫
css3實現逐幀動畫
2018-06-29
CSSS3動畫
css3 實現逐幀動畫
2016-05-29
CSSS3動畫
如何看待自己寫的爛程式碼
2014-08-03
編寫自己的 TypeScript CLI
2022-02-09
TypeScript
CSS3實現王者匹配時的粒子動畫效果
2019-04-09
CSSS3動畫
css3實現的折角效果程式碼例項
2017-03-03
CSSS3
手寫CSS3動畫的幾種流派
2017-12-05
CSSS3動畫
編寫自己的Acunetix WVS漏洞指令碼
2020-08-19
指令碼
DBA日常維護SQL指令碼_自己編寫的
2018-05-11
SQL指令碼
JAVA實現編寫平臺程式碼生成器
2018-04-13
Java
構建自己的React UI元件庫(三)：文件編寫
2019-03-04
ReactUI元件
css3 animation動畫程式碼例項
2017-03-30
CSSS3動畫
css3實現動畫閃爍效果
2019-12-27
CSSS3動畫
純CSS3實現人物跑步動畫
2014-10-15
CSSS3動畫
編寫更好的CSS程式碼
2014-01-15
CSS
編寫可讀的程式碼
2012-07-11
CSS3常用功能的寫法
2010-03-15
CSSS3
無需編寫程式碼，API業務流程測試，零程式碼實現
2018-07-10
API
css3實現的loadding載入動畫效果
2017-03-05
CSSS3動畫

編寫自己的程式碼庫：CSS3 常用動畫的實現

1.前言

宣告

2.hover動畫

2-1.簡單動畫

2-1-1大小變化

2-1-2形狀變化

2-1-3旋轉角度變化

2-1-4位移變化

2-1-5邊框變化

2-1-6陰影變化

2-1-7透明度變化

2-1-8圓角變化

html

2-2.顏色動畫效果

2-2-1.顏色塊變化

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

2-2-3箭頭動畫

2-3較複雜動畫

2-3-1閃爍效果

2-3-2鬧鐘振鈴效果

2-3-3搖擺效果

2-3-4搖晃效果

2-3-5抖動效果

2-3-6彈跳效果

3.預設動畫

4.未知探索

4-1.無限執行動畫

4-2.反向動畫

4-3.組合效果

5.雞肋選擇

6.小結

相關文章