CSS gridシステムでアニメーション

左メニューとメインカラムがあって、左メニューの省略可を想定。

gridシステムでレイアウトのアニメーションをするときは、 grid-template-columns などをアニメーション対象にできないので、 grid-template-columns などは auto 設定にしておき、グリッド要素側が width などの数値を変える。

transition

.wrapper__left の .wrapper__left–open / .wrapper__left–close の切り替えで。

  .wrapper{
    height: 100vh;
    width:100%;
    display: grid;
    grid-template-columns:auto 1fr;
    grid-template-rows: auto 1fr;
    &__header{
      grid-column:1/3;
      grid-row: 1;
    }
    &__left{
      background-color:#ccc;
      grid-column:1;
      grid-row: 2;
      transition: width .5s ease-in-out;
      &--open{
        width:200px;
      }
      &--close{
        width:20px;
      }
    }
    &__main{
      grid-column:2;
      grid-row: 2;
    }
  }

animation

とりあえずアニメーションすることだけ確認したので、ひたすら動いているコードになっちゃってますが…。

  .wrapper{
    height: 100vh;
    width:100%;
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto 1fr;
    &__header{
      grid-column:1/3;
      grid-row: 1;
    }
    &__left{
      background-color:#ccc;
      width:200px;
      grid-column:1;
      grid-row: 2;
      animation: leftanime 2s ease-in-out infinite alternate;
    }
    &__main{
      grid-column:2;
      grid-row: 2;
    }
  }
  @keyframes leftanime {
  0% {
    width: 200px;
  }
  100% {
    width: 20px;
  }