pake-style

サンプル

https://ishi720.github.io/pake-style/

インストール

• npm

npm i pake-style 

• yarn

yarn add pake-style 

読み込み

HTMLで以下のようにCSSファイルを読み込んで下さい

<link href="pake-style/css/pake-style.min.css" rel="stylesheet" type="text/css">

使い方

• アニメーションぷるん(pake-anime-prun1s ~ pake-anime-prun5s)

指定した順に「ぷるん」の動作をします

<img class="pake-anime-prun1s" src="hoge.png">
<img class="pake-anime-prun2s" src="hoge.png">
<img class="pake-anime-prun3s" src="hoge.png">

• アニメーションふらっしゅ(pake-anime-flash1s ~ pake-anime-flash5s)

指定した順にふらっしゅの動作をします

<img class="pake-anime-flash1s" src="hoge.png">
<img class="pake-anime-flash2s" src="hoge.png">
<img class="pake-anime-flash3s" src="hoge.png">

• アニメーションくるん(pake-anime-krun1s ~ pake-anime-krun5s)

指定した順に「くるん」の動作をします

<img class="pake-anime-krun1s" src="hoge.png">
<img class="pake-anime-krun2s" src="hoge.png">
<img class="pake-anime-krun3s" src="hoge.png">

• アニメーションすぴん(pake-anime-spin1s ~ pake-anime-spin5s)

指定した順に「すぴん」の動作をします

<img class="pake-anime-spin1s" src="hoge.png">
<img class="pake-anime-spin2s" src="hoge.png">
<img class="pake-anime-spin3s" src="hoge.png">

• アニメーションまるころ(pake-anime-marukoro1s ~ pake-anime-marukoro5s)

指定した順に「まるころ」の動作をします

<img class="pake-anime-marukoro1s" src="hoge.png">
<img class="pake-anime-marukoro2s" src="hoge.png">
<img class="pake-anime-marukoro3s" src="hoge.png">