自定義css動畫參考

2021-09-28 22:19:23 字數 3071 閱讀 6377

/* 

寫屬於自己的動畫樣式(參考 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 用於建立自定義動畫的函式。這個函式的關鍵在於指定動畫形式及結果樣式屬性物件...