html实现简单动画,编写自己的代码库(css3常用动画的实现)
1.前言
在月初的時候，發了CSS3熱身實戰--過渡與動畫(實現炫酷下拉，手風琴，無縫滾動)。js的代碼庫也發過兩次，兩篇文章。之前也寫了css3的熱身實戰，既然熱身完了，是時候開始封裝css3的代碼庫了，相比起js的代碼庫，css3的代碼庫的邏輯性就更加簡單了！可以說只要打上注釋和一張效果圖就可以讓大家明白了其中的原理了！
我寫代碼庫的時候，動畫效果主要是參考了三個開源項目，nec，hover.css，animate.css這三個項目的質量非常的高，建議大家去了解。
源碼已經放到github上面了，大家可以去看，也歡迎大家star一下！ec-css。
我指出這三個庫并不是叫大家去拿別人的代碼，稍微修改一下，或者直接拷貝到自己的項目上，然后就說是自己的項目。我是讓大家去看別人的代碼，學習別人的實現方式或者動畫效果，然后再用自己的方式實現，當然如果把別人的項目，增刪改查到面目全非的地步，這個我個人覺得可以說是自己的項目了！強調一點，不要直接復制別人的代碼，放到自己的項目上，然后說是自己開發的，這是不尊重別人的成果，對自己的技術水平提升的幫助也較少。我寫文章，雖然也會給出代碼，但是我的目的是提供大家參考的，希望給讓大家學習到知識或者發散思維，寫出更好的作品。之前也說過，我寫文章的目的是授人以漁，不是授人以魚。
聲明
1.下面將會看到很多個類似這樣的舉行，都是span標簽，樣式都是給出的css
span{
cursor: pointer;
height: 40px;
line-height: 40px;
text-align: center;
display: inline-block;
color: #333;
background: #ccc;
min-width: 80px;
padding: 0 10px;
margin: 10px;
}
2.關于class命名方式，l代表left，r代表right，t代表top，b代表bottom，c代表center，m代表middle。切記
文章比較長，但是說得就是兩點，大家看得也應該會很快
1.寫出一些hover動畫和預設動畫的運行效果，并且貼出代碼
2.發現幾個動畫組合，和加上無限動畫，反向動畫，會有不一樣的效果，并且繼續研究，看下能不能研究出不一樣的東西！
2.hover動畫
說了那么多，是時候進入正文了，
首先是hover動畫，關于這個概念，我解釋下，就是鼠標移上去觸發的動畫，就是觸發了鼠標的hover事件時能看到的動畫！下面，按照類型，一個一個的寫！
2-1.簡單動畫
2-1-1大小變化
html
big
small
css
.ech-big,.ech-small {
transition: all .4s;
}
.ech-big:hover{
transform: scale(1.2);
}
.ech-small:hover{
transform: scale(.9);
}
2-1-2形狀變化
html
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);
}
2-1-3旋轉角度變化
html
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);
}
2-1-4位移變化
html
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);
}
2-1-5邊框變化
html
border
border-in
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
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);
}
2-1-7透明度變化
html
fade-out
fade-in
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
rectangle
radius
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
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);
}
2-2-2.顏色上下劃線變化
這里也是一大塊一起說，看代碼可能會更亂，所以大家看代碼的時候要更加留神注意。看代碼看不明白，直接在github下載，然后運行文件，邊調試邊看效果！這樣大家就很容易明白了！
html
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);
}
2-2-3箭頭動畫
html
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);
}
2-3較復雜動畫
2-1和2-2的內容，都是利用過渡實現效果，那么這一塊就是利用動畫來實現效果！區別就是hover的寫法是增加一個動畫，動畫的封裝，難度就在于創意。
2-3-1閃爍效果
html
flash
css
.ech-flash:hover {
animation: flash .5s ease;
}
@keyframes flash {
0%, 50%, 100% {
opacity: 1;
}
25%, 75% {
opacity: 0;
}
}
2-3-2鬧鐘振鈴效果
html
shake-time
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
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);
}
}
2-3-4搖晃效果
html
swing
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
shake
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
bounce
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.預設動畫
受限于篇幅的長度，我也不想分開兩篇文章寫。關于這個預設動畫，我就簡單的說一下，寫一下，我直接給一個大概的操作演示，和完整的代碼！反正寫法這個也是比較單一，無非就是改一個類名而已。難的是動畫的一些編寫，這個需要創意，大家可以上網參考。
(不知道為什么，gif截大圖放不上來，就放了張小的，大家結果下面的jpg一起看把，就是通過下面的按鈕，展示動畫，大家也可以在github下面下載代碼看下)
(完整代碼比較多，這里貼出，但是建議大家稍微看一下，過一下就好，因為這個只看代碼是會懵逼的，要在瀏覽器打開文件，一看調試一邊看，這樣會很簡單，很容易的明白)
html代碼
demo.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;
}
infinite
alternate
stop
bounce
bounce-in-b
bounce-in-l
bounce-in-t
bounce-in-r
bounce-out-b
bounce-out-l
bounce-out-t
bounce-out-r
wobble
wobble-t
wobble-b
fade-in
fade-in-t
fade-in-b
fade-in-l
fade-in-r
fade-out
fade-out-t
fade-out-b
fade-out-l
fade-out-r
rotate-in
rotate-in-rb
rotate-in-rt
rotate-in-lb
rotate-in-lt
rotate-out
rotate-out-rb
rotate-out-rt
rotate-out-lb
rotate-out-lt
flip-in-x
flip-in-y
flip-out-x
flip-out-y
light-speed-in
light-speed-out
shake-time
flash
rubber-band
rubber-band-fast
swing
shake
pulse-shrink
pulse
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)
}
})
}
css
/*動畫效果*/
.ec-bounce-in-l {
animation: bounce-in-l 1s ease;
}
@keyframes bounce-in-l {
0%, 60%, 75%, 90%, to {
animation-timing-function: cubic-bezier(.215, .61, .355, 1)
}
0% {
opacity: 0;
transform: translate3d(-3000px, 0, 0)
}
60% {
opacity: 1;
transform: translate3d(25px, 0, 0)
}
75% {
transform: translate3d(-10px, 0, 0)
}
90% {
transform: translate3d(5px, 0, 0)
}
to {
-webkit-transform: none;
transform: none
}
}
.ec-bounce-in-r {
animation: bounce-in-r 1s ease;
}
@keyframes bounce-in-r {
0%, 60%, 75%, 90%, to {
animation-timing-function: cubic-bezier(.215, .61, .355, 1)
}
0% {
opacity: 0;
transform: translate3d(3000px, 0, 0)
}
60% {
opacity: 1;
transform: translate3d(-25px, 0, 0)
}
75% {
transform: translate3d(10px, 0, 0)
}
90% {
transform: translate3d(-5px, 0, 0)
}
to {
-webkit-transform: none;
transform: none
}
}
.ec-bounce-in-b{
animation: bounce-in-b 1s;
}
.ec-bounce-in-t{
animation: bounce-in-t 1s;
}
@keyframes bounce-in-t {
from, 60%, 75%, 90%, to {
animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
}
0% {
opacity: 0;
transform: translate3d(0, -3000px, 0);
}
60% {
opacity: 1;
transform: translate3d(0, 25px, 0);
}
75% {
transform: translate3d(0, -10px, 0);
}
90% {
transform: translate3d(0, 5px, 0);
}
to {
transform: none;
}
}
@keyframes bounce-in-b{
from, 60%, 75%, 90%, to {
animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
}
0% {
opacity: 0;
transform: translate3d(0, 3000px, 0);
}
60% {
opacity: 1;
transform: translate3d(0, -25px, 0);
}
75% {
transform: translate3d(0, 10px, 0);
}
90% {
transform: translate3d(0, -5px, 0);
}
to {
transform: none;
}
}
@keyframes bounce-out-b {
20% {
transform: translate3d(0, 10px, 0);
}
40%, 45% {
opacity: 1;
transform: translate3d(0, -20px, 0);
}
to {
opacity: 0;
transform: translate3d(0, 2000px, 0);
}
}
.ec-bounce-out-b {
animation: bounce-out-b 1s;
}
@keyframes bounce-out-l {
20% {
opacity: 1;
transform: translate3d(20px, 0, 0);
}
to {
opacity: 0;
transform: translate3d(-2000px, 0, 0);
}
}
.ec-bounce-out-l {
animation: bounce-out-l 1s;
}
@keyframes bounce-out-r {
20% {
opacity: 1;
transform: translate3d(-20px, 0, 0);
}
to {
opacity: 0;
transform: translate3d(2000px, 0, 0);
}
}
.ec-bounce-out-r {
animation: bounce-out-r 1s;
}
@keyframes bounce-out-t {
20% {
transform: translate3d(0, -10px, 0);
}
40%, 45% {
opacity: 1;
transform: translate3d(0, 20px, 0);
}
to {
opacity: 0;
transform: translate3d(0, -2000px, 0);
}
}
.ec-bounce-out-t {
animation: bounce-out-t 1s;
}
/*心跳效果*/
.ec-pulse {
animation: pulse 1s linear;
}
.ec-pulse-shrink {
animation: pulse .5s linear;
}
@keyframes pulse {
25% {
transform: scale(1.1);
}
75% {
transform: scale(0.9);
}
}
.ec-flash {
animation: flash .5s ease;
}
/*搖擺*/
.ec-swing {
animation: swing .5s ease;
}
@keyframes swing {
20% {
transform: rotate(15deg);
}
40% {
transform: rotate(-10deg);
}
60% {
transform: rotate(5deg);
}
80% {
transform: rotate(-5deg);
}
100% {
transform: rotate(0);
}
}
/*搖擺*/
.ec-wobble-t{
transform-origin: 0 100%;
}
.ec-wobble-b{
transform-origin: 100% 0;
}
.ec-wobble,.ec-wobble-t,.ec-wobble-b {
animation: wobblex 1s ease-in-out;
}
@keyframes wobblex {
16.65% {
-webkit-transform: skew(-12deg);
transform: skew(-12deg);
}
33.3% {
-webkit-transform: skew(10deg);
transform: skew(10deg);
}
49.95% {
-webkit-transform: skew(-6deg);
transform: skew(-6deg);
}
66.6% {
-webkit-transform: skew(4deg);
transform: skew(4deg);
}
83.25% {
-webkit-transform: skew(-2deg);
transform: skew(-2deg);
}
100% {
-webkit-transform: skew(0);
transform: skew(0);
}
}
/*閃爍*/
@keyframes flash {
0%, 50%, 100% {
opacity: 1;
}
25%, 75% {
opacity: 0;
}
}
.ec-rubber-band {
animation: rubber-band 1s;
}
.ec-rubber-band-fast {
animation: rubber-band .5s;
}
@keyframes rubber-band {
from {
transform: scale3d(1, 1, 1);
}
30% {
transform: scale3d(1.25, 0.75, 1);
}
40% {
transform: scale3d(0.75, 1.25, 1);
}
50% {
transform: scale3d(1.15, 0.85, 1);
}
65% {
transform: scale3d(.95, 1.05, 1);
}
75% {
transform: scale3d(1.05, .95, 1);
}
to {
transform: scale3d(1, 1, 1);
}
}
/*仿鬧鐘振鈴效果*/
.ec-shake-time{
animation: shake-time 1s ease;
}
@keyframes shake-time {
0% {
transform: scale(1);
}
10%, 20% {
transform: scale(0.9) rotate(-3deg);
}
30%, 50%, 70%, 90% {
transform: scale(1.1) rotate(3deg);
}
40%, 60%, 80% {
transform: scale(1.1) rotate(-3deg);
}
100% {
transform: scale(1) rotate(0);
}
}
/*彈跳變化*/
.ec-bounce{
animation: bounce 1s ease;
}
@keyframes bounce {
0%, 20%, 50%, 80%, 100% {
transform: translateY(0);
}
40% {
transform: translateY(-30px);
}
60% {
transform: translateY(-15px);
}
}
/*震動*/
.ec-shake {
animation: shake .5s ease;
}
@keyframes shake {
0%, 100% {
transform: translateX(0);
}
10%, 30%, 50%, 70%, 90% {
transform: translateX(-10px);
}
20%, 40%, 60%, 80% {
transform: translateX(10px);
}
}
/*透明度進入*/
@keyframes fade-in {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.ec-fade-in {
animation: fade-in 1s;
}
@keyframes ec-fade-in-b {
from {
opacity: 0;
transform: translate3d(0, -100%, 0);
}
to {
opacity: 1;
transform: none;
}
}
.ec-fade-in-b {
animation: ec-fade-in-b 1s;
}
@keyframes ec-fade-in-l {
from {
opacity: 0;
transform: translate3d(-100%, 0, 0);
}
to {
opacity: 1;
transform: none;
}
}
.ec-fade-in-l {
animation: ec-fade-in-l 1s;
}
@keyframes ec-fade-in-r {
from {
opacity: 0;
transform: translate3d(100%, 0, 0);
}
to {
opacity: 1;
transform: none;
}
}
.ec-fade-in-r {
animation: ec-fade-in-r 1s;
}
@keyframes ec-fade-in-t {
from {
opacity: 0;
transform: translate3d(0, 100%, 0);
}
to {
opacity: 1;
transform: none;
}
}
.ec-fade-in-t {
animation: ec-fade-in-t 1s;
}
@keyframes ec-fade-out {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
.ec-fade-out {
animation: ec-fade-out 1s;
}
@keyframes ec-fade-out-b {
from {
opacity: 1;
}
to {
opacity: 0;
transform: translate3d(0, 100%, 0);
}
}
.ec-fade-out-b {
animation: ec-fade-out-b 1s;
}
@keyframes ec-fade-out-l {
from {
opacity: 1;
}
to {
opacity: 0;
transform: translate3d(-100%, 0, 0);
}
}
.ec-fade-out-l {
animation: ec-fade-out-l 1s;
}
@keyframes ec-fade-out-r {
from {
opacity: 1;
}
to {
opacity: 0;
transform: translate3d(100%, 0, 0);
}
}
.ec-fade-out-r {
animation: ec-fade-out-r 1s;
}
@keyframes ec-fade-out-t {
from {
opacity: 1;
}
to {
opacity: 0;
transform: translate3d(0, -100%, 0);
}
}
.ec-fade-out-t {
animation: ec-fade-out-t 1s;
}
/*旋轉進出*/
@keyframes rotate-in{
0%{opacity:0;transform:rotate(-200deg);}
100%{opacity:1;transform:rotate(0);}
}
.ec-rotate-in {
animation: rotate-in 1s;
}
@keyframes rotate-in-lt{
0%{transform-origin:left bottom;transform:rotate(-90deg);opacity:0;}
100%{transform-origin:left bottom;transform:rotate(0);opacity:1;}
}
.ec-rotate-in-lt {
animation: rotate-in-lt 1s;
}
@keyframes rotate-in-lb{
0%{transform-origin:left bottom;transform:rotate(90deg);opacity:0;}
100%{transform-origin:left bottom;transform:rotate(0);opacity:1;}
}
.ec-rotate-in-lb {
animation: rotate-in-lb 1s;
}
@keyframes rotate-in-rt{
0%{transform-origin:right bottom;transform:rotate(90deg);opacity:0;}
100%{transform-origin:right bottom;transform:rotate(0);opacity:1;}
}
.ec-rotate-in-rt {
animation: rotate-in-rt 1s;
}
@keyframes rotate-in-rb{
0%{transform-origin:right bottom;transform:rotate(-90deg);opacity:0;}
100%{transform-origin:right bottom;transform:rotate(0);opacity:1;}
}
.ec-rotate-in-rb {
animation: rotate-in-rb 1s;
}
.ec-rotate-out {
animation: rotate-out 1s;
}
@keyframes rotate-out{
0%{transform-origin:center center;transform:rotate(0);opacity:1;}
100%{transform-origin:center center;transform:rotate(200deg);opacity:0;}
}
.ec-rotate-out-lt {
animation: rotate-out-lt 1s;
}
@keyframes rotate-out-lt{
0%{transform-origin:left bottom;transform:rotate(0);opacity:1;}
100%{transform-origin:left bottom;transform:rotate(-90deg);opacity:0;}
}
.ec-rotate-out-lb {
animation: rotate-out-lb 1s;
}
@keyframes rotate-out-lb{
0%{transform-origin:left bottom;transform:rotate(0);opacity:1;}
100%{transform-origin:left bottom;transform:rotate(90deg);opacity:0;}
}
.ec-rotate-out-rt {
animation: rotate-out-rt 1s;
}
@keyframes rotate-out-rt{
0%{transform-origin:right bottom;transform:rotate(0);opacity:1;}
100%{transform-origin:right bottom;transform:rotate(90deg);opacity:0;}
}
.ec-rotate-out-rb {
animation: rotate-out-rb 1s;
}
@keyframes rotate-out-rb{
0%{transform-origin:right bottom;transform:rotate(0);opacity:1;}
100%{transform-origin:right bottom;transform:rotate(-90deg);opacity:0;}
}
/*翻轉進出*/
@keyframes flip-in-x {
from {
transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
animation-timing-function: ease-in;
opacity: 0;
}
40% {
transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
animation-timing-function: ease-in;
}
60% {
transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
opacity: 1;
}
80% {
transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
}
to {
transform: perspective(400px);
}
}
.ec-flip-in-x {
animation: flip-in-x 1s;
}
@keyframes flip-in-y {
from {
transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
animation-timing-function: ease-in;
opacity: 0;
}
40% {
transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
animation-timing-function: ease-in;
}
60% {
transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
opacity: 1;
}
80% {
transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
}
to {
transform: perspective(400px);
}
}
.ec-flip-in-y {
animation: flip-in-y 1s;
}
@keyframes flip-out-x {
from {
transform: perspective(400px);
}
30% {
transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
opacity: 1;
}
to {
transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
opacity: 0;
}
}
.ec-flip-out-x {
animation: flip-out-x 1s;
}
@keyframes flip-out-y {
from {
transform: perspective(400px);
}
30% {
transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
opacity: 1;
}
to {
transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
opacity: 0;
}
}
.ec-flip-out-y {
animation: flip-out-y 1s;
}
@keyframes light-speed-in {
from {
transform: translate3d(100%, 0, 0) skewX(-30deg);
opacity: 0;
}
60% {
transform: skewX(20deg);
opacity: 1;
}
80% {
transform: skewX(-5deg);
opacity: 1;
}
to {
transform: none;
opacity: 1;
}
}
.ec-light-speed-in {
animation: light-speed-in 1s ease-out;
}
@keyframes light-speed-out {
from {
opacity: 1;
}
to {
transform: translate3d(100%, 0, 0) skewX(30deg);
opacity: 0;
}
}
.ec-light-speed-out {
animation: light-speed-out ease-in 1s;
}
/*無限次數執行動畫*/
.ec-infinite{
animation-iteration-count: infinite;
}
.ec-alternate {
animation-direction: alternate;
}
4.未知探索
好了，說完了hover動畫和預設動畫，我開發的時候，發現了這樣一些好玩的東西，我也準備繼續研究，也建議大家玩下，說不定哪天做出了了不起的東西！如下面的栗子！
下面說的動畫，不分hover動畫和預設動畫，大家注意
4-1.無限執行動畫
一個普通的動畫，加上無限執行，一般會出現很友好的效果，
但是有些時候的效果差強人意
4-2.反向動畫
在4-1的基礎上，加上方向執行動畫，也會有不一樣的效果
沒加反向動畫效果
加上反向動畫效果
4-3.組合效果
陰影效果和其它效果的組合，(gif看不出陰影效果，哎。。)
上面的幾個的栗子
css代碼不變，區別是html代碼，多加了一些類名
上面幾個是我在開發時候發現的栗子，這個我會繼續研究，也希望大家能研究，研究出什么好玩的效果，或者動畫寫法，歡迎分享！
5.雞肋選擇
在寫css3代碼庫的時候，我也發現封裝css3的一個雞肋情況。
1.css3的效果太過于靈活，多樣，封裝非常容易出現眾口難調的情況，以及每個項目的效果可能出現效果差不多，但就是不一樣，這樣就是說封裝的庫并不適合用在項目上。
2.還有一點在于，css3效果基本上每一個項目都是有用到，并且是常用，但是平常項目要用到的css3效果最多也就10個，而且也不難，手寫很快可以實現，根本沒必要去引一個插件或者庫。
但是最后我還是堅持寫下去了，原因如下
1.如果項目開發，對動畫效果的要求基本不會達到非常的嚴格的地步，我完全可以多引一個文件，增加我的開發效率，壓縮過后的文件可能只有10K左右，可以接受。
2.就算在項目用不上，我也可以當作是練手，學習的作用。如果以后項目需要動畫效果，即使動畫效果跟我封裝的不一樣，我也可以看著來進行修改。
3.就算開發的時候沒使用上這個庫，萬一有些動畫，我寫過，但是忘了怎么寫，也可以回頭看怎么實現！
4.如果開發的時候，不知道放什么效果好，這個庫，也能起到一定的參考作用！
5.現在多寫幾個，說不定起到一個發散思維的作用，寫了這些效果，想到了另一些效果怎么寫，或者想到還有什么效果可以寫，這個也是非常好的一個結果和收獲！
6.小結
好了，css3的代碼庫封裝到這里就差不多了，如果你能看完全篇，你已經是勇士了，證明你很有耐心，看完馬上掌握，這個對于大家來說問題不大，畢竟不是什么邏輯性強的代碼。我想要的效果雖然都實現了，不過以后肯定也是要修改完善的(至少看源碼的話，我自己看得都有點亂，但是一時之間又不知道該如果整理，就先放上去了)。話說回來，通過以上的案例，希望能幫到大家，最理想就是能起到發散思維的作用，就是通過我的案例，能讓大家知道其它的一些動畫怎么做，或者想到有什么好看動畫效果。web前端這一行，最重要的就是多練，大家除了看別人的項目，博客之外，一定要多練，多寫，這樣進步才會更快，知識才會記得更牢。
最后，如果大家覺得我哪里寫得不好或者寫錯了，歡迎指出。有什么好的想法，隨時給您寶貴的建議我！項目我也放到github上面了！有需要的可以去看下，star下ec-css！
-------------------------華麗的分割線--------------------
想了解更多，關注關注我的微信公眾號：守候書閣
總結
以上是生活随笔為你收集整理的html实现简单动画,编写自己的代码库(css3常用动画的实现)的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 假币之谜
- 下一篇： cisco privilege权限