랭킹으로 돌아가기
Martz90/vivify
CSSVivify is free CSS animation library.
animation-librarycss-animationscss3-animationsanimationcsscss3helperhelpers
주요 지표
스타 성장
스타
1.7k
포크
148
주간 성장
—
이슈
5
5001k1.5k
2017년 8월2019년 1월2020년 7월2022년 1월2023년 7월2025년 1월2026년 7월
아티팩트npm
npm install vivifyREADME
Vivify is free CSS animation library.
Usage
Simply include vivify css file into your document's <head>
<link href="vivify.min.css" rel="stylesheet" type="text/css"/>
Add class vivify to the element you want to animate. If you want your animation to be infinite, you can also add infinite class.
List of class names you can add
- ball
- blink
- driveInBottom
- driveInLeft
- driveInRight
- driveInTop
- driveOutBottom
- driveOutLeft
- driveOutRight
- driveOutTop
- fadeIn
- fadeInBottom
- fadeInLeft
- fadeInRight
- fadeInTop
- fadeOut
- fadeOutBottom
- fadeOutLeft
- fadeOutRight
- fadeOutTop
- flip
- flipInX
- flipInY
- flipOutX
- flipOutY
- fold
- hitLeft
- hitRight
- jumpInLeft
- jumpInRight
- jumpOutLeft
- jumpOutRight
- popIn
- popInBottom
- popInLeft
- 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
delay and duration classes
If you want to quickly change delay or duration you can just add delay- or duration- and number in ms.
Available times: 100,150 to 900,950 1000,1250,1500,1750 to 10000,10250,10500,10750
example: delay-2500 for 2.5 second delay. or duration-550 for 550 ms duration.
관련 저장소