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

來源：懂視網責編：小采時間：2020-11-27 18:52:26

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

巧用css3animation動畫特效插件方法介紹:下載 animate.css文件，文件的代碼很多，不過要明白那是很多特效的CSS樣式，如果只使用到其中的一兩個特效，可以選擇性的復制。首先是公共的樣式：.animated { -webkit-animation-duration: 1s; animation-duration: 1s; -webk

推薦度：

點擊下載本文 文檔為doc格式

導讀巧用css3animation動畫特效插件方法介紹:下載 animate.css文件，文件的代碼很多，不過要明白那是很多特效的CSS樣式，如果只使用到其中的一兩個特效，可以選擇性的復制。首先是公共的樣式：.animated { -webkit-animation-duration: 1s; animation-duration: 1s; -webk

下載 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頁面使用，可以對文字、圖片等其他元素使用，下面的效果是一張持續跳動的圖片

<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 動畫特效，可以在 animate.css 網站查看，每一個特效的名字剛好也是樣式定義的類名、動畫幀名，可以一一對應。也可以在該網站下載最新版的 animate.css文件。

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

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com