CSSのみで、コンテンツの遷移を行うカスタムアニメーションクラスを作成しました。各CSSトランジションは、必要なスタイルを適用する基本クラスと、トランジションの状態を制御する追加クラスで構成されています。

スケール

このスケールは要素の拡大縮小に使用します。基本のトランジションクラスscale-transitionを追加してください。次に、クラスscale-outを追加して、要素が非表示になるまで縮小します。最初に何かを非表示にするには、クラスscale-outを追加してから、クラスscale-inを追加して、要素が表示されるまで拡大します。

add スケール

  <!-- Scaled in -->
  <a id="scale-demo" href="#!" class="btn-floating btn-large scale-transition">
    <i class="material-icons">add</i>
  </a>

  <!-- Scaled out -->
  <a id="scale-demo" href="#!" class="btn-floating btn-large scale-transition scale-out">
    <i class="material-icons">add</i>
  </a>