日本一卡精品视频免费丨国产午夜片无码区在线播放丨国产精品成人久久久久久久丨国产亚洲日韩av在线播放不卡丨亚洲日韩av无码

　　這一個(gè)是css3  animation動(dòng)畫特效在線演示的網(wǎng)站 https://daneden.github.io/animate.css/

　　下載 animate.css文件，文件的代碼很多，不過要明白那是很多特效的CSS樣式，
如果只使用到其中的一兩個(gè)特效，可以選擇性的復(fù)制。

 

首先是公共的樣式：

.animated { 
  -webkit-animation-duration: 1s; 
  animation-duration: 1s; 
  -webkit-animation-fill-mode: both; 
  animation-fill-mode: both; 
} 

.animated.infinite { 
  -webkit-animation-iteration-count: infinite; 
  animation-iteration-count: infinite; 
}

.animated定義了動(dòng)畫的持續(xù)時(shí)間；

.animated.infinite定義了循環(huán)動(dòng)畫，如果只要求播放一次就不需要添加該樣式
下面是每個(gè)特效的樣式，舉幾個(gè)例子：

• 彈跳特效 bound

@-webkit-keyframes bounce { 
  from, 20%, 53%, 80%, to { 
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); 
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); 
    -webkit-transform: translate3d(0,0,0); 
    transform: translate3d(0,0,0); 
  } 

  40%, 43% { 
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); 
    animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); 
    -webkit-transform: translate3d(0, -30px, 0); 
    transform: translate3d(0, -30px, 0); 
  } 

  70% { 
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); 
    animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); 
    -webkit-transform: translate3d(0, -15px, 0); 
    transform: translate3d(0, -15px, 0); 
  } 

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

@keyframes bounce { 
  from, 20%, 53%, 80%, to { 
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); 
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); 
    -webkit-transform: translate3d(0,0,0); 
    transform: translate3d(0,0,0); 
  } 

  40%, 43% { 
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); 
    animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); 
    -webkit-transform: translate3d(0, -30px, 0); 
    transform: translate3d(0, -30px, 0); 
  } 

  70% { 
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); 
    animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); 
    -webkit-transform: translate3d(0, -15px, 0); 
    transform: translate3d(0, -15px, 0); 
  } 

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

.bounce { 
  -webkit-animation-name: bounce; 
  animation-name: bounce; 
  -webkit-transform-origin: center bottom; 
  transform-origin: center bottom; 
}

在html頁面使用，可以對(duì)文字、圖片等其他元素使用，下面的效果是一張持續(xù)跳動(dòng)的圖片

<img src="returnTop.png" class="animated infinite bounce">

• 閃爍特效 flash

@-webkit-keyframes flash { 
  from, 50%, to { 
    opacity: 1; 
  } 

  25%, 75% { 
    opacity: 0; 
  } 
} 

@keyframes flash { 
  from, 50%, to { 
    opacity: 1; 
  } 

  25%, 75% { 
    opacity: 0; 
  } 
} 

.flash { 
  -webkit-animation-name: flash; 
  animation-name: flash; 
}

• 搖擺特效 swing

@-webkit-keyframes swing { 
  20% { 
    -webkit-transform: rotate3d(0, 0, 1, 15deg); 
    transform: rotate3d(0, 0, 1, 15deg); 
  } 

  40% { 
    -webkit-transform: rotate3d(0, 0, 1, -10deg); 
    transform: rotate3d(0, 0, 1, -10deg); 
  } 

  60% { 
    -webkit-transform: rotate3d(0, 0, 1, 5deg); 
    transform: rotate3d(0, 0, 1, 5deg); 
  } 

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

  to { 
    -webkit-transform: rotate3d(0, 0, 1, 0deg); 
    transform: rotate3d(0, 0, 1, 0deg); 
  } 
} 

@keyframes swing { 
  20% { 
    -webkit-transform: rotate3d(0, 0, 1, 15deg); 
    transform: rotate3d(0, 0, 1, 15deg); 
  } 

  40% { 
    -webkit-transform: rotate3d(0, 0, 1, -10deg); 
    transform: rotate3d(0, 0, 1, -10deg); 
  } 

  60% { 
    -webkit-transform: rotate3d(0, 0, 1, 5deg); 
    transform: rotate3d(0, 0, 1, 5deg); 
  } 

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

  to { 
    -webkit-transform: rotate3d(0, 0, 1, 0deg); 
    transform: rotate3d(0, 0, 1, 0deg); 
  } 
} 

.swing { 
  -webkit-transform-origin: top center; 
  transform-origin: top center; 
  -webkit-animation-name: swing; 
  animation-name: swing; 
}

 

　　還有很多animation 動(dòng)畫特效，可以在 animate.css 網(wǎng)站查看，每一個(gè)特效的名字剛好也是
樣式定義的類名、動(dòng)畫幀名，可以一一對(duì)應(yīng)。也可以在該網(wǎng)站下載最新版的 animate.css文件。

 

　　溫馨提示：animation 是css3的特性，支持的是最新的主流瀏覽器，上述插件是 支持-webkit內(nèi)核的瀏覽器，
如果想支持其他的最新瀏覽器，請(qǐng)自行添加相應(yīng)瀏覽器供應(yīng)商前綴的動(dòng)畫幀。

 

　　animate.css文件網(wǎng)盤下載：https://pan.baidu.com/s/1sl6c1uX