Vivify 純CSS動畫效果
Vivify
趣的68種純CSS動畫滾動效果，還不試試?
Vivify CSS動畫庫你還沒玩過嗎? 你可以隨意添加到網站內運行，總共有以下這些效果:
線上演示 → Vivify Codepen
- ball
- blink
- driveInBottom
- driveInLeft
- driveInRight
- driveInTop
- driveOutBottom
- driveOutLeft
- driveOutRight
- driveOutTop
- fadeIn
- fadeInBottom
- fadeInLeft
- fadeInRight
- fadeInTop
- fadeOut
- fadeOutBottom
- fadeOutLeft
- fadeOutRight
- flip
- flipInX
- flipInY
- flipOutX
- flipOutY
- fold
- hitLeft
- hitRight
- jumpInLeft
- jumpInRight
- jumpOutLeft
- jumpOutRight
- popIn
- popInBottom
- popInRight
- popInTop
- popOut
- popOutBottom
- popOutLeft
- popOutRight
- popOutTop
- pullDown
- pullLeft
- pullRight
- pullUp
- pulsate
- rollInBottom
- rollInLeft
- rollInRight
- rollInTop
- rollOutBottom
- rollOutLeft
- rollOutRight
- rollOutTop
- shake
- spin
- spinIn
- spinOut
- swoopInBottom
- swoopInLeft
- swoopInRight
- swoopInTop
- swoopOutBottom
- swoopOutLeft
- swoopOutRight
- swoopOutTop
- unfold
使用方式
線上展示可以連結此處 - Vivify - CodePen
線上演示 → Vivify Codepen
使用方法只需要將 vivify css 文件包含到文檔的HEAD中
教學 → Vivify Github
如果您想快速更改延遲或持續時間，您只需添加延遲或持續時間以及以毫秒為單位的數字。
範例：delay-2500 延遲 2.5 秒。 或 duration-550 持續 550 毫秒。