Getting Started

アニメーションしたいときは、アニメーションさせたい要素のスタイルシートで animation mixin を読み込みます。

mixin の引数は、それぞれ以下の項目を指定できます。

animation-name (例: slide-enter-left)
- 用意してある @keyframes の名前を書くことでアニメーションの動きを指定します。
animation-duration (例: 0.3s)
- アニメーションする秒数を指定します。
animation-delay (例: 0)
- アニメーションするタイミングを指定します。指定した秒数ぶん遅れてアニメーションします。
animation-iteration-count (例: 1)
- アニメーションする回数を指定します。infinite を指定すると、無限に繰り返します。

Roll In

左から右へ、回転しながら非表示から表示するアニメーションです。

<!-- ここではclassを指定していますが、mixinを各々のコンポーネントで使用してください。 -->
<div class="ncgr-animation__roll-in">
  <img src="./images/foundation/animation/surisuri.svg" style="width: 200px; height: 200px;">
</div>

Roll Out

左から右へ、回転しながら表示から非表示するアニメーションです。

<!-- ここではclassを指定していますが、mixinを各々のコンポーネントで使用してください。 -->
<div class="ncgr-animation__roll-out">
  <img src="./images/foundation/animation/surisuri.svg" style="width: 200px; height: 200px;">
</div>

Slide Enter Left

左から右へ、非表示から表示するアニメーションです。

<!-- ここではclassを指定していますが、mixinを各々のコンポーネントで使用してください。 -->
<div class="ncgr-animation__slide-enter-left">
  <img src="./images/foundation/animation/surisuri.svg" style="width: 200px; height: 200px;">
</div>

Slide Enter Top

上から下へ、非表示から表示するアニメーションです。

<!-- ここではclassを指定していますが、mixinを各々のコンポーネントで使用してください。 -->
<div class="ncgr-animation__slide-enter-top">
  <img src="./images/foundation/animation/surisuri.svg" style="width: 200px; height: 200px;">
</div>

Spin

グルグルと回転するアニメーションです。