/*
寫屬於自己的動畫樣式(參考 animate.css 動畫庫)
*//* 預設基礎類作用:為預設情況
其他情況,可以[按需]修改預設情況(重新賦值)
*//* 定義基礎類 */
.zc-animation
/* 始終是否迴圈執行 */
.infinite
/* 設定延遲執行時間 */
.delay-1s
.delay-2s
.delay-3s
.delay-4s
.delay-5s
/* 設定動畫執行時間長短 */
.fast
.faster
.slow
.slower
/* 設定不同動畫執行速度 */
/* 定義每乙個動畫樣式 */
/* bounce 彈跳 */
@keyframes bounce
40%,
43%70%90%
}.bounce
/* 從內部彈 */
@keyframes bouncein
0%20%
40%60%
80%}
.bouncein
/* 從左側彈 */
@keyframes bounceleft
0%60%
70%90%
}.bounceleft
/* 從右側彈 */
@keyframes bounceright
0%60%
70%90%
}.bounceright
/* 從上面彈 */
@keyframes bouncetop
0%60%
70%90%
}.bouncetop
/* 從下面彈 */
@keyframes bouncebottom
0%60%
70%90%
}.bouncebottom
/* 閃爍 */
@keyframes flash
25%,
75%}.flash
/* 3頻快閃 */
@keyframes flasher
16%,
48%,
82%}.flasher
/* 縮放 */
@keyframes pules
50%}
.pules
/* 字型放大動畫 */
@keyframes pulesfont
50%}
.pulesfont
/* 拉伸 */
@keyframes rubberband
30%40%
50%65%
75%to
}.rubberband
/* 平移 */
@keyframes shake
10%,
30%,
50%,
70%,
90%20%,
40%,
60%,
80%}.shake
/* 搖擺 */
@keyframes swing
40%60%
80%100%
}.swing
/* 搖擺縮放 */
@keyframes graduallyput
10%,
20%30%,
50%,
70%,
90%40%,
60%,
80%to}
.graduallyput
/* 搖晃轉盤 */
@keyframes turntable
15%30%
45%60%
75%to
}.turntable
/* 拉伸 */
@keyframes jello
22.2%
33.3%
44.4%
55.5%
66.6%
77.7%
88.8%
}.jello
/* 左側閃現 */
@keyframes lightenout
25%,75%
}.lightenoutleft
.lightenoutright
.lightenoutcenter
/* 開幕式動畫 */
@keyframes inaugurationto}
.inauguration
.inaugurationtop
.inaugurationbottom
/* */
@keyframes heartbeat
25%,60%
}.heartbeat
/* 淡入 */
@keyframes fadeinto}
.fadein
/* 淡入往下 */
@keyframes fadeindownto}
.fadeindown
/* 淡入從上往下的距離變大 */
@keyframes fadeindownbigto}
.fadeindownbig
/* 從左側淡入 */
@keyframes fadeinleftto}
.fadeinleft
/* 淡入從左往右的距離變大 */
@keyframes fadeinleftbigto}
.fadeinleftbig
/* 從右側淡入 */
@keyframes fadeinrightto}
.fadeinright
/* 淡入從右往左的距離變大 */
@keyframes fadeinrightbigto}
.fadeinrightbig
/* 淡入往上 */
@keyframes fadeinupto}
.fadeinup
/* 淡入往上距離變大 */
@keyframes fadeinupbigto}
.fadeinupbig
自定義動畫
在製作自定義動畫時,有以下八個樣式可供選擇 animation name 動畫名稱 元素所應用的動畫名稱,必須與規則 keyframes 配合使用,因為動畫名稱由 keyframes 定義。animation duration 動畫時間 設定物件動畫的持續時間 animation timing fu...
CustomAnim自定義動畫
android只提供了4種基本動畫效果,除了可以疊加效果外,我們還可以進行自定義動畫。mainactivity.class不變 package com.customanim.customanim import android.os.bundle import android.view.view pu...
自定義動畫效果
demotitle charset utf 8 src bootstrap js jquery.min.js script div1 style head animateh2 params,speed easing fn p 用於建立自定義動畫的函式。這個函式的關鍵在於指定動畫形式及結果樣式屬性物件...