首頁 > web前端 > css教學 > 主體

巧用css3 animation動畫特效插件方法介紹

高洛峰
發布: 2017-03-17 10:25:53
原創
1795 人瀏覽過

下載 animate.css文件,文件的程式碼很多,不過要明白那是很多特效的CSS樣式,如果只使用到其中的一兩個特效,可以選擇性的複製。

首先是公共的樣式:

.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定义了动画的持续时间;
登入後複製
.animated.infinite定义了循环动画,如果只要求播放一次就不需要添加该样式
下面是每个特效的样式,举几个例子:
登入後複製
  • 彈跳特效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頁面使用,可以對文字、 圖片等其他元素使用,以下的效果是一張持續跳動的圖片

r​​rreee
  • #閃爍特效flash

  • ##
<img src="returnTop.png" class="animated infinite bounce">
登入後複製
  • 搖擺特效swing

@-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;
}
登入後複製
  還有很多animation 動畫特效,可以在 animate.css 網站查看,每個特效的名字剛好也是樣式定義的類別名稱、動畫幀名,可以一一對應。也可以在該網站下載最新版的 animate.css檔案。

  溫馨提示:animation 是css3的特性,支援的是最新的主流瀏覽器,上述外掛程式是支援-webkit核心的瀏覽器,如果想支援其他的最新瀏覽器,請自行加入對應瀏覽器供應商前綴的動畫影格。

以上是巧用css3 animation動畫特效插件方法介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板