・アイコンSVG潰れ



アイコンフレーム設定
  //子要素のタブのデザイン

  ホバー
  アイコンSVGアニメーション

buttonBasic
  アイコンSVGのアニメーションを作成します。

  zenblocks/src/blocks/block-element/buttonBasic/style-animations.scss
  を参考にして
  .wp-block-zenblocks-button-basic-icon > svg
  のホバーアニメーションを作成してください

  アニメーションのファイルは別途用意してください
  styles/_icon_animation.scss

  まず１種類シンプルなsvgが移動するアニメーションを作成してください
  edit.jsで
  .zenblocks-button-hover-icon-animation-01を付加しています。



  styles/_icon_animation.scss
  にアニメーションを追加してください。

  zenblocks-button-hover-icon-animation-01
  を残したまま

  zenblocks-button-hover-icon-animation-02
  zenblocks-button-hover-icon-animation-03
  zenblocks-button-hover-icon-animation-04
  zenblocks-button-hover-icon-animation-05
  のクラス名でアニメーションを作成してください。

  edit.jsでのクラス切り替えはまだ不要です。
  scssのアニメーションのみ追加してください

  主に
  transform opacity
  を利用してscssアニメーションにしてください
  zenblocks/src/blocks/block-element/buttonBasic/style-animations.scss
  を参考にアニメーションパターンを作成するという意味です。



  transformはtranslateのみにしてください
  以下のアニメーションを作成してください

  xxx-01（全部で800ms）
  初期値：中央 opacity 1
  step1：中央 （opacity:1 -> 0）
  step2：右に移動 opacity 0
  step3：右から中央に移動（opacity: 0 -> 1）

  xxx-02（全部で800ms）
  初期値：中央 opacity 1
  step1：左に移動（opacity: 1 -> 0）
  step2：右に移動 opacity 0
  step3：右から中央に移動（opacity: 0 -> 1）

  xxx-03（全部で800ms）
  初期値：中央 opacity 1
  step1：左斜め上に移動（opacity: 1 -> 0）
  step2：右斜め下に移動 opacity 0
  step3：右斜め下から中央に移動（opacity: 0 -> 1）

  xxx-04 削除
  xxx-05 削除

  01 02 03のアニメーションの左右を入れ替えてください

  0.8sも変数にしてください

以下のアニメーションを追加してください

  xxx-04（全部で800ms）
  初期値：中央 opacity 1
  step1：中央から右に移動 （opacity:1 -> 0）
  step2：中央に移動 opacity 0
  step3：中央（opacity: 0 -> 1）