1.前言
在月初的時候，發了CSS3熱身實戰--過渡與動畫（實現炫酷下拉，手風琴，無縫滾動）。js的代碼庫也發過兩次，兩篇文章。以前也寫了css3的熱身實戰，既然熱身完了，是時候開始封裝css3的代碼庫了，相比起js的代碼庫，css3的代碼庫的邏輯性就更加簡單了！能夠說只要打上註釋和一張效果圖就可讓你們明白了其中的原理了！
我寫代碼庫的時候，動畫效果主要是參考了三個開源項目，nec，hover.css，animate.css這三個項目的質量很是的高，建議你們去了解。
源碼已經放到github上面了，你們能夠去看，也歡迎你們star一下！ec-css。javascript
我指出這三個庫並非叫你們去拿別人的代碼，稍微修改一下，或者直接拷貝到本身的項目上，而後就說是本身的項目。我是讓你們去看別人的代碼，學習別人的實現方式，而後再用本身的方式實現，固然若是把別人的項目，增刪改查到面目全非的地步，這個我我的以爲能夠說是本身的項目了！強調一點，不要直接複製別人的代碼，放到本身的項目上，而後說是本身開發的，這是不尊重別人的成果，對本身的技術水平提高的幫助也較少。我寫文章，雖然也會給出代碼，可是個人目的是提供你們參考的，但願給讓你們學習到知識或者發散思惟，寫出更好的做品。以前也說過，
我寫文章的目的是授人以漁，不是授人以魚。css還有一個就是，若是本身的文章或者項目引用，借鑑，參考了哪一個項目的代碼，最好把引用的項目給說明一下。html
聲明
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。切記java
文章比較長，可是說得就是兩點，你們看得也應該會很快
1.寫出一些hover動畫和預設動畫的運行效果，而且貼出代碼
2.發現幾個動畫組合，和加上無限動畫，反向動畫，會有不同的效果，而且繼續研究，看下能不能研究出不同的東西！node
2.hover動畫
說了那麼多，是時候進入正文了，css3
首先是hover動畫，關於這個概念，我解釋下，就是鼠標移上去觸發的動畫，就是觸發了鼠標的hover事件時能看到的動畫！下面，按照類型，一個一個的寫！git
2-1.簡單動畫
2-1-1大小變化
htmlgithub
<span class="ech-big">big</span> <span class="ech-small">small</span>
cssweb
.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前端這一行，最重要的就是多練，你們除了看別人的項目，博客以外，必定要多練，多寫，這樣進步纔會更快，知識才會記得更牢。